Reached my limited skillz... html help please

[dmegatool]

http://farm2.static.flickr.com/1010/1405185080_a7f6a018bf_o.jpg

As you can see, there some unwanted space between my images. In Safari it's fine, in FF too, Opera. Name them all, it's all good. But in IE... you know

It's pretty simple. You got a table with 3 column. 2 shadows on each side and the content in the center. There's my flash menu in a row, the shadow in another and the content in the 3rd. I use DIVS to place my content in 2 colum.

Probably you wouldn't do it that way but let's make it clear : I'm really not a programmer :) You guys can probaly help me a little bit with this one. Here a snip from the code :

<table width="750" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="img/common/side_shadows_left.gif" width="5">&nbsp;</td>
<td> My flash menu here ! </td>
<td background="img/common/side_shadows_right.gif" width="5">&nbsp;</td>
</tr>

<tr>
<td background="img/common/side_shadows_left.gif"></td>
<!-- Unwanted space here!!!! It doesn't dock to my flash menu -->
<td valign="top"><img src="img/common/header_shadow.jpg" /> </td>
<td background="img/common/side_shadows_right.gif"></td>
</tr>

<tr>
<td background="img/common/side_shadows_left.gif">&nbsp;</td>
<td>


<div style="float:left; padding-top:10px; padding-left:10px; width:376px" >
Left content here
</div>

<div style="float:right; width:332px" >
<!-- Second unwanted space here !!!!! -->
Right content here
</div>

</td>
<td background="img/common/side_shadows_right.gif">&nbsp;</td>
</tr>
</table>

[noleli2]

It could be a Quirks mode issue. Have you specified a DOCTYPE (http://www.alistapart.com/stories/doctype/)?

[kretara]

Have you tried adding border="0" to all your image calls?

[jdcfsu]

The other thing that comes to mind is the IE 3px Float Bug, which I detest: http://www.webmasterworld.com/forum83/6057.htm

[dmegatool]

Hey thanks for your help guys ! But my friend nailed it !! I knew it !!

I just come back from there. He just told me "3 pixel gap in IE ? Use display: block". And boom ! There it is ! So here what worked

<td valign="top"><img src="img/common/header_shadow.jpg" style="display: block" /> </td>

Thanks for your help guys. Really appreciate the effort (maybe your solution could be good too :)... who knows)

[Wyatt]

You can also specify the top and bottom padding to 0 px. If you don't explicitly specify padding on an image, IE puts in a default of 3 px.

[ast3r3x]

I think it should be noted that you shouldn't be using tables to create that header. It's proper to use divs and css for that, and tables for…wait for it…waiiiiitttt forrr ittt…tabular data. Mostly it's just because it's easier to change things and gives more support to disabled users (screen readers).

[Gargoyle]

Another thing to consider is that you have empty cells, or just spaces so the row height will be whatever is the default font size for tables.

If your going to use tables for layout, then you might as well create a 1x1 pixel transparent gif and put it in any empty table cells and get rid of the spaces.