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

Alan Petersen · 08-14-2009, 02:37 PM

Hello,

Messed up the HTML for my mini-site template. I don't see anything in the code but I'm not a coder.

Any suggestions on how I can remove this line:

Thanks!

jgalty · 08-14-2009, 02:43 PM

What's the website address for i can take a look at it.

TristanPerry · 08-14-2009, 03:03 PM

Yeah, you'll need to provide a website address. Either that, or the (X)HTML and CSS used. Also, what changes did you make?

nontemplates · 08-14-2009, 05:04 PM

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.

stoco · 08-14-2009, 07:39 PM

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.

Alan Petersen · 08-14-2009, 08:54 PM

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.

TristanPerry · 08-15-2009, 05:28 AM

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

Alan Petersen · 08-16-2009, 11:50 AM

Quote:

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

TristanPerry · 08-16-2009, 12:04 PM

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.

nontemplates · 08-16-2009, 02:03 PM

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.

08-14-2009, 02:37 PM	#1
Alan Petersen Senior Warrior Member War Room Member Join Date: Oct 2006 Location: San Francisco, CA Posts: 3,386 Blog Entries: 11 Thanks: 723 Thanked 777 Times in 494 Posts Social Networking	Messed up HTML code now I have a black line. Help needed. Hello, Messed up the HTML for my mini-site template. I don't see anything in the code but I'm not a coder. Any suggestions on how I can remove this line: Thanks!
	New WSO: Cash In With Amazon's Forgotten Business! How To Turn Friendly Conversations into Cash Internet Marketing Blog \| \|Join the Amazon Self Publisher's Group \| eBay Affiliates Only

08-14-2009, 02:43 PM	#2
jgalty Active Warrior Join Date: Jul 2009 Location: Canada Posts: 41 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Messed up HTML code now I have a black line. Help needed. What's the website address for i can take a look at it.
	Barrie Web Design

08-14-2009, 03:03 PM	#3
TristanPerry Advanced Warrior War Room Member Join Date: Aug 2009 Location: Cardiff, United Kingdom Posts: 772 Thanks: 171 Thanked 147 Times in 103 Posts Social Networking	Re: Messed up HTML code now I have a black line. Help needed. Yeah, you'll need to provide a website address. Either that, or the (X)HTML and CSS used. Also, what changes did you make?
	"If you are clear where you are going and you take several steps in that direction every day, you eventually have to get there."

08-14-2009, 05:04 PM	#4
nontemplates HyperActive Warrior Join Date: Jan 2008 Location: Sunny Florida Posts: 214 Thanks: 10 Thanked 22 Times in 19 Posts	Re: Messed up HTML code now I have a black line. Help needed. 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.

08-14-2009, 07:39 PM	#5
stoco Warrior Member Join Date: Sep 2003 Location: Phoenix, AZ, USA. Posts: 15 Thanks: 0 Thanked 2 Times in 2 Posts	Re: Messed up HTML code now I have a black line. Help needed. 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.
	John Stone No Gimmick Domain Names Under $8.00 Don't let your eBook, Music or Video Products get ripped off. Protect your digital products from online theft by Clicking Here. Stop the Download Thieves.

08-14-2009, 08:54 PM	#6
Alan Petersen Senior Warrior Member War Room Member Join Date: Oct 2006 Location: San Francisco, CA Posts: 3,386 Blog Entries: 11 Thanks: 723 Thanked 777 Times in 494 Posts Social Networking	Re: Messed up HTML code now I have a black line. Help needed. 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.
	New WSO: Cash In With Amazon's Forgotten Business! How To Turn Friendly Conversations into Cash Internet Marketing Blog \| \|Join the Amazon Self Publisher's Group \| eBay Affiliates Only

08-15-2009, 05:28 AM	#7
TristanPerry Advanced Warrior War Room Member Join Date: Aug 2009 Location: Cardiff, United Kingdom Posts: 772 Thanks: 171 Thanked 147 Times in 103 Posts Social Networking	Re: Messed up HTML code now I have a black line. Help needed. 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

08-16-2009, 12:04 PM	#9
TristanPerry Advanced Warrior War Room Member Join Date: Aug 2009 Location: Cardiff, United Kingdom Posts: 772 Thanks: 171 Thanked 147 Times in 103 Posts Social Networking	Re: Messed up HTML code now I have a black line. Help needed. 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.
	"If you are clear where you are going and you take several steps in that direction every day, you eventually have to get there."

08-16-2009, 02:03 PM	#10
nontemplates HyperActive Warrior Join Date: Jan 2008 Location: Sunny Florida Posts: 214 Thanks: 10 Thanked 22 Times in 19 Posts	Re: Messed up HTML code now I have a black line. Help needed. 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.