Messed up HTML code now I have a black line. Help needed.

nontemplates 16 years ago

Well without seeing the site I'll just take my best shot. Either

A) A slicing problem. (view background image)
B) A border is being put around your image (set img and base border properties to 0 )
C) background is black and theres a margin/padding issue. (check values in that div)

Could be a few other things as well. Like the others have said Its extremely hard to hit it without seeing the page. Don't even know if its designed with Divs and CSS or old school tables.
- [ 1 ] Thanks
{{ DiscussionBoard.errors[1081859].message }}

stoco

16 years ago

non templates is on the right track. Also, if you are using tables for the image splits, you can look for 'cellspacing' and 'cellpadding' settings, should be set to 0.

But of course, without seeing the site and the code, we are all shooting in the dark.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[1082167].message }}

Alan Petersen 16 years ago

It's divs. I changed the padding to "0" there was one at 2 but still there. Here is the site:

New Page 1

Thanks for taking look! Just a warning there is an auto-play video.
- Thanks
Signature

The Asset - My CIA Thriller Fiction Book For Your Kindle
Fictive Universe - Internet Marketing for Fiction Writers
{{ DiscussionBoard.errors[1082340].message }}

TristanPerry

16 years ago

Okay, it's a tabled design so it does make it a bit harder to de-bug.

But I *think* that this is because the height of the:

Code:

<tr>
      <td background="images/template_01.jpg">
      <div align="center">
      <table id="table2" width="760" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg" height="266" width="761" border="0"></td>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
    </tr>

bit is taller than the background image

images/template_01.jpg

And so the background now repeats. I *think* this is the cause, anywhoo. The problem seems to be that the height is becoming too tall, hence why the background image is repeating. Insert try the following.

Find:

Code:

<table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>

        </tbody>

Replace with:

Code:

<table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760" height="266" style="max-height: 266px; padding: 0;">
        <tbody>
          <tr>
            <td height="266" style="max-height: 266px; padding: 0;"> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>
        </tbody>
      </table>

The above should fix it on second thoughts. Let us know if it doesn't.

You can also make the background image not repeat, but this wouldn't fix the main issue (i.e. the fact that the table is too tall)

P.S. I've had to edit our the <img src=""> URLs since I have less than 15 posts. It wasn't letting me post. I trust you can see the difference find though

[ 1 ] Thanks
1 reply

Signature

Plagiarism Guard - Protect Against Content Theft

{{ DiscussionBoard.errors[1083100].message }}

Alan Petersen

16 years ago

Originally Posted by TristanPerry

Okay, it's a tabled design so it does make it a bit harder to de-bug.

But I *think* that this is because the height of the:

Code:

<tr>
      <td background="images/template_01.jpg">
      <div align="center">
      <table id="table2" width="760" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg" height="266" width="761" border="0"></td>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
    </tr>

bit is taller than the background image

images/template_01.jpg

And so the background now repeats. I *think* this is the cause, anywhoo. The problem seems to be that the height is becoming too tall, hence why the background image is repeating. Insert try the following.

Find:

Code:

<table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>

        </tbody>

Replace with:

Code:

<table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760" height="266" style="max-height: 266px; padding: 0;">
        <tbody>
          <tr>
            <td height="266" style="max-height: 266px; padding: 0;"> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>
        </tbody>
      </table>

The above should fix it on second thoughts. Let us know if it doesn't.

You can also make the background image not repeat, but this wouldn't fix the main issue (i.e. the fact that the table is too tall)

P.S. I've had to edit our the <img src=""> URLs since I have less than 15 posts. It wasn't letting me post. I trust you can see the difference find though

The new code didn't work--black line was still there but you did point me in the right direction of where to look. I ended up dropping the height size down from 266 to 260 and the black line is gone but now there is a blue break in the header. Any suggestions on that?

Download Niche Stores Unleashed FREE!

Thanks a lot for your help!

Alan

Thanks

Signature

The Asset - My CIA Thriller Fiction Book For Your Kindle
Fictive Universe - Internet Marketing for Fiction Writers

{{ DiscussionBoard.errors[1086782].message }}

TristanPerry

16 years ago

Hmm that's odd. It's the same sort of issue as before - the table cell containing your header image is still larger than the header image itself, hence why a background image is showing through.

If this was <divs> it'd just be a case of putting a negative margin-bottom CSS style on it.

What I'm wondering is whether or not this is due to the "<div align="center">" code you have.

Perhaps try finding:

Code:

<td background="http://www.warriorforum.com/images/template_04.jpg">
      <div align="center">
      <table id="table3" border="0" cellpadding="0"

and

Code:

</tbody>
      </table>
      </div>
      </td>

And replacing with:

Code:

<td background="http://www.warriorforum.com/images/template_04.jpg">
      <table id="table3" border="0" cellpadding="0"

and

Code:

</tbody>
      </table>
      </td>

It might be that it's this <div> which is causing the padding/margin issues.

If you don't wish to remove that <div>, instead try this:

Find:

Code:

<td background="http://www.warriorforum.com/images/template_01.jpg">
      <div align="center">
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">

Replace with:

Code:

<td background="http://www.warriorforum.com/images/template_01.jpg">
      <div align="center" style="margin:0; padding:0;">
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">

Let me know if any of that works. It's always difficult to track down, especially with a tabled layout, although it's just a case of some margin or padding (from one of the table cells or <div>s) creating that gap.

Apologies I can't think of an exact cause; as above, it's always more difficult when there's lots of table cells and <div>s which could be the issue. If you use Firefox, left click whilst holding "Ctrl" to the left of the header image. This will highlight the top table cell - which shows that the top table cell is, for some reason, still coming out taller than the template_02.jpg image for some reason.

Thanks

Signature

Plagiarism Guard - Protect Against Content Theft

{{ DiscussionBoard.errors[1086817].message }}

nontemplates

16 years ago

Yeah tables within tables are a pain. Quite honestly the time it takes to hunt down the problem you could rebuild the whole page in modern compliant XHTML and CSS and never have any of those headaches. I could reproduce that site in 15-20 minutes.

Thing is if the OP is using something like frontpage before the page is finished there will probably be more problems.

Thanks

{{ DiscussionBoard.errors[1087129].message }}

Messed up HTML code now I have a black line. Help needed.

Trending Topics

Clickbank, Digistore24 or Amazon Associates

Buying passive-income KDP businesses on Flippa

What is the fastest way to get traffic to an affiliate link?

Shopify + Syncee for dropshipping. Is this a good combination?

Hey Warriors! Excited to join the community