Firefox displays tables with images lousily a.o.t. IE 1

[fsteeman]

I have met this problem before...

I have made a smart design for a webpage involving tables containing images along the edges to yield a cool-looking rounded table look, if you know what I mean...

This looks great in IE, but in Firefox, the edge cells contain, besides the images, an empty bar letting through the pages background and wrecking up the entire look.

Piece of code:

<table border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td valign="top"><img border="0" src="images/IUL.gif"></td>
      <td width ="680" background="images/IUM.gif">&nbsp;</td>
      <td valign="top"><img border="0" src="images/IUR.gif"></td> 
   </tr>
   <tr>
      <td valign="top"><img border="0" src="images/IBL.jpg"></td>
      <td width ="680" background="images/gradient_grey.jpg"></td>
      <td valign="top"><img border="0" src="images/IBR.jpg"></td>
   </tr>                    
   <tr>
      <td valign="top" style="width: 30px; height: 32px"><img border="0" src="images/ILL.jpg"></td>
      <td width ="680" background="images/ILM.jpg"></td>
      <td valign="top"><img border="0" src="images/ILR.jpg"></td> 
   </tr>
</table>

What do I need to change in the code to make sure it displays correctly in both Firefox and IE?

Cheers,

Fedor Steeman
Geological Museum Copenhagen
Denmark

 

[BabyJeffy]

What do I need to change in the code to make sure it displays correctly in both Firefox and IE?

Choose a valid doctype, put it as the very first line on your web page... and then validate your HTML against it at the w3c site:

http://validator.w3.org

This will yield code that has a far far far better chance of working properly across browsers.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[ChrisHunt]

I'd also try making the corners background images, rather than using <img> elements. You might also like to look at

http://www.alistapart.com/articles/customcorners

as one (of many) CSS-based alternative methods for customising corners and borders - you could save a lot of markup if you don't use a 9-cell table for each single block of markup.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd