Problem with table heigth in IE!!

[JFRobishow]

Ok,

Here's my problem, I have my page divided top/bottom. The top contain the logo, etc.

The bottom contain a table that contain the image of a bar going accross (left->right). The particular image's heigth is 5px, I try to put it in a td that have a with of 5px. That work just fine under Opera, Mozilla, etc but not IE!! IE seems to just look over the height="5" of that td.

This is my code:

<table width=&quot;620&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;1&quot;>

<tr valign=&quot;bottom&quot;>
  <td colspan=&quot;3&quot; height=&quot;5&quot;>
    <img src=&quot;images/topBar.gif&quot; width=&quot;620&quot; height=&quot;5&quot;> 
  </td>
</tr>

<tr valign=&quot;top&quot;>
 <td width=&quot;76&quot;> 
    <img src=&quot;images/leftNav.gif&quot; width=&quot;72&quot; height=&quot;894&quot; border=&quot;0&quot;> 
 </td>
 
 <td width=&quot;298&quot;>
2
 </td>
 
 <td width=&quot;246&quot;>
3
 </td>
</tr>

</table>

It doesn't produce the expected result in IE, I would want the second row to be touching the first one (if you prefer I would want to have topbar's cell exactly 5px high so that the second row would fit right under that w/o any space.) IE is obviously skipping the height in:

<td colspan=&quot;3&quot; height=&quot;5&quot;>

replacing it by some sort of value that I don't know of...

Any help is appreciated.
Thanks

 

[JFRobishow]

Hi all,

Just wanted to let you know I got it working now with some not so standard code, so I wouldn't waste your time.

Why can't they stick to standard HTML, Long life Opera

 

[TheConeHead]

What fixed it.... was it that you needed a valign=top in the bottom row?

 

[ChrisHunt]

My guess would be that it (wrongly) puts a space in the <td> either before or after the image, so you'd fix it by removing the line breaks & white space:
[tt]
<td colspan=&quot;3&quot; height=&quot;5&quot;><img src=&quot;images/topBar.gif&quot; width=&quot;620&quot; height=&quot;5&quot;></td>
[/tt]
Would be nice to know what JFRobishow did though.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[JFRobishow]

This is my working code:

<table width=&quot;620&quot; height=&quot;100&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>

<tr valign=&quot;bottom&quot;>
 <td colspan=&quot;3&quot; width=&quot;620&quot; height=&quot;10&quot;>
   <img src=&quot;images/newbar.gif&quot; width=&quot;620&quot; height=&quot;5&quot;    border=&quot;0&quot;>
 </td>
</tr>

<tr valign=&quot;top&quot;>
  <td width=&quot;80&quot; height=&quot;894&quot;> 
    <img src=&quot;images/page_historique2.gif&quot; width=&quot;72&quot; height=&quot;894&quot; border=&quot;0&quot;> 
   </td>

<td width=&quot;340&quot; height=&quot;894&quot;>1</td>
<td width=&quot;200&quot; height=&quot;894&quot;>2</td>

I already had a valign=&quot;top&quot; in my bottom row. All I did was specify for each and every td my width and height and that fixed it for me.

 

[JFRobishow]

Note that my height=&quot;10&quot; is the way I wanted it and not something I did to fix it. I wanted a 5px space on top of the image, just nothing under it, so that it would connect with the next row. That is what IE wasn't doing properly, until I added width/height attribute to all my td.

<td colspan=&quot;3&quot; width=&quot;620&quot; height=&quot;10&quot;>