Table stretching excessively in IE

[Arthur Dent]

Hello all... i have a really frsutrating problem here...
This is only happening in IE (6 & 7b2), Mozilla and Netscape are both OK.

I have a top-level table with a width of 760px, so it should be 760 minimum
and stretching wider as needed to fit content (such as bound datagrids).
In the top TR/TD, i have a header table which is width of 100%, and has
three TD's. Each contains one image file, with the middle TD being set to
width 100%.
So the td should push the end TDs to as narrow as the images in them, which
works perfectly. The middle TD is giving me a problem though. If it is
empty, then everything behaves as expected, with the whole content being
760px minimum, stretching as needed.
Next i try to add an image to the middle td of the header table. I would
expect the TD to stretch bigger as needed to fit the width of the picture.
Instead it stretches wider to fit the width of the image PLUS an additional
190 pixels of just empty whitespace, which screws up the layout of my page
now.

Anyone seen this before or have an idea how to fix it? I tried putting a
style="float: <value>" on the middle image as sometimes that fixes weird
image layout problems, but it didnt help. I also tried GIFs instead of PNGs
but that was no help either.

Essentially the code looks like this:

<table width="760px">
<tr><td id="tdHeader">
<table width="100%">
<tr><td>
<img src="/images/headerLeft.png" >
</td></td>
<tr><td width="100%">
<img src="/images/headerMiddle.png" >
<!-- it renders an extra 190px of width right
here -->
</td></td>
<tr><td>
<img src="/images/headerRight.png" >
</td></td>
</table>
</td></td>
<tr><td id="tdContent"></td></td>
<tr><td id="tdFooter"></td></td>
</table>

 

[Laurent Bugnion]

Hi,

Hello all... i have a really frsutrating problem here...
This is only happening in IE (6 & 7b2), Mozilla and Netscape are both OK.

I have a top-level table with a width of 760px, so it should be 760 minimum
and stretching wider as needed to fit content (such as bound datagrids).
In the top TR/TD, i have a header table which is width of 100%, and has
three TD's. Each contains one image file, with the middle TD being set to
width 100%.
So the td should push the end TDs to as narrow as the images in them, which
works perfectly. The middle TD is giving me a problem though. If it is
empty, then everything behaves as expected, with the whole content being
760px minimum, stretching as needed.
Next i try to add an image to the middle td of the header table. I would
expect the TD to stretch bigger as needed to fit the width of the picture.
Instead it stretches wider to fit the width of the image PLUS an additional
190 pixels of just empty whitespace, which screws up the layout of my page
now.

Anyone seen this before or have an idea how to fix it? I tried putting a
style="float: <value>" on the middle image as sometimes that fixes weird
image layout problems, but it didnt help. I also tried GIFs instead of PNGs
but that was no help either.

Essentially the code looks like this:

<table width="760px">
<tr><td id="tdHeader">
<table width="100%">
<tr><td>
<img src="/images/headerLeft.png" >
</td></td>
<tr><td width="100%">
<img src="/images/headerMiddle.png" >
<!-- it renders an extra 190px of width right
here -->
</td></td>
<tr><td>
<img src="/images/headerRight.png" >
</td></td>
</table>
</td></td>
<tr><td id="tdContent"></td></td>
<tr><td id="tdFooter"></td></td>
</table>

First, your table is invalid. You have a </td> too much and a </tr> too
little.

Then, I noticed strange effects when unnecessary carriage returns were
placed in a table. Try this:

<table width="760px">
<tr>
<td id="tdHeader">
<table width="100%">
<tr>
<td><img src="/images/headerLeft.png"></td>
</tr>
<tr>
<td width="100%"><img src="/images/headerMiddle.png"></td>
</tr>
<tr>
<td><img src="/images/headerRight.png"></td>
</tr>
</table>
</td>
</tr>
<tr><td id="tdContent"></td></tr>
<tr><td id="tdFooter"></td></tr>
</table>

HTH,
Laurent

 

[Arthur Dent]

Oops, yah, those extra TDs were supposed to be TRs. Typo - i manually typed
that in the msg instead of copy/pasting.

I tried putting all my TD content on one line as in :

<td><img src='/images/someImage.gif'></td>

but to no avail.... it still keeps the table wider than it needs to be by
the same approx. 190 px.
Thanks for the idea though. .

 

[Laurent Bugnion]

Hi Arthur,

Oops, yah, those extra TDs were supposed to be TRs. Typo - i manually typed
that in the msg instead of copy/pasting.

I tried putting all my TD content on one line as in :

<td><img src='/images/someImage.gif'></td>

but to no avail.... it still keeps the table wider than it needs to be by
the same approx. 190 px.
Thanks for the idea though. .

Can you email me the HTML/CSS code that displays the problem? If I can
reproduce it, I'll try to solve it.

Greetings,
Laurent

 

[slagomite]

Instead setting the middle TD's width to 100%, try setting the end TDs'
width to 1%, and leave the middle TD's width blank. This is how I
always do it, and it works like a charm in IE.

HTH
Luke