SitePoint.com

busboy · Nov 8, 2009, 11:54

Here is the code in question:

Code:

<table width="770" height="30" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>
    <td height="13" background="http://www.oil-testimonials.com/images/bottomline.gif"></td>
  </tr>

</table>

If you view this in IE, it is showing two of bottomline.gif If you view this in Safari, it shows nothing at all. This is a very simple table and I'm stumped as to why there are such vast differences between the two browsers. I only want bottomline.gif to show up once.

Any suggestions?

Thanks!

PhilipToop · Nov 8, 2009, 15:34

I'm afraid you are not writing valid html. I suspect that IE is taking notice of the height and background. Probably the height on the table is overriding the height on the row so the row becomes the height of the table, 30px. The image is repeating both horizontally and vertically hence you are seeing two lines. Since the image height is 13px I would suspect to see the beginning of a 3rd line.

Try

HTML Code:

<html>
<body>
<table style="width: 770px; height: 30px; border: none; text-align: center">

  <tr>
    <td style="background-image: url(http://www.oil-testimonials.com/images/bottomline.gif);"></td>
  </tr>

</table>
</body>
</html>

busboy · Nov 8, 2009, 16:37

Unfortunately that didn't go over well. If you goto oil-testimonials.com you'll see the problem down at the bottom. Any other ideas?

PhilipToop · Nov 9, 2009, 03:05

Some addition E (with accent) have crept in somewhere in the process. These need to be removed.

Secondly lose the text-align style, reduce you height on the table (unless 30px is the height you wanted) and put your align="center" attribute back in.

That is:

HTML Code:

<html>
<body>
<table style="width: 770px; height: 13px; border: none;" align: center">
  <tr>
    <td style="background-image: url(http://www.oil-testimonials.com/images/bottomline.gif);"></td>
  </tr>

</table>
</body>
</html>

You should really look at using a css, you are using a lot of html to influence the look of the page.

LauraGigs · Nov 10, 2009, 13:52

I agree about CSS. A simple way to begin with that: are you building in DreamWeaver? If you go under Modify > Page Properties and change some settings there, DW will generate a CSS file. You can open that file and see how it is written.

Nov 8, 2009, 11:54	#1
busboy SitePoint Addict Join Date: Sep 2004 Location: Provo, UT Posts: 302	HTML rendering differences between IE and Safari Here is the code in question: Code: <table width="770" height="30" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="13" background="http://www.oil-testimonials.com/images/bottomline.gif"></td> </tr> </table> If you view this in IE, it is showing two of bottomline.gif If you view this in Safari, it shows nothing at all. This is a very simple table and I'm stumped as to why there are such vast differences between the two browsers. I only want bottomline.gif to show up once. Any suggestions? Thanks!

Nov 8, 2009, 15:34	#2
PhilipToop SitePoint Enthusiast Join Date: Jun 2007 Location: North Yorkshire, UK Posts: 38	I'm afraid you are not writing valid html. I suspect that IE is taking notice of the height and background. Probably the height on the table is overriding the height on the row so the row becomes the height of the table, 30px. The image is repeating both horizontally and vertically hence you are seeing two lines. Since the image height is 13px I would suspect to see the beginning of a 3rd line. Try HTML Code: <html> <body> <table style="width: 770px; height: 30px; border: none; text-align: center"> <tr> <td style="background-image: url(http://www.oil-testimonials.com/images/bottomline.gif);"></td> </tr> </table> </body> </html>

Nov 9, 2009, 03:05	#4
PhilipToop SitePoint Enthusiast Join Date: Jun 2007 Location: North Yorkshire, UK Posts: 38	Some addition E (with accent) have crept in somewhere in the process. These need to be removed. Secondly lose the text-align style, reduce you height on the table (unless 30px is the height you wanted) and put your align="center" attribute back in. That is: HTML Code: <html> <body> <table style="width: 770px; height: 13px; border: none;" align: center"> <tr> <td style="background-image: url(http://www.oil-testimonials.com/images/bottomline.gif);"></td> </tr> </table> </body> </html> You should really look at using a css, you are using a lot of html to influence the look of the page.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 8, 2009, 16:37	#3
busboy SitePoint Addict Join Date: Sep 2004 Location: Provo, UT Posts: 302	Unfortunately that didn't go over well. If you goto oil-testimonials.com you'll see the problem down at the bottom. Any other ideas?

Nov 10, 2009, 13:52	#5
LauraGigs SitePoint Member Join Date: Aug 2009 Posts: 6	I agree about CSS. A simple way to begin with that: are you building in DreamWeaver? If you go under Modify > Page Properties and change some settings there, DW will generate a CSS file. You can open that file and see how it is written.