Table stretching excessively in IE

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="http://pics.10026.com/?src=/images/headerLeft.png" >
</td></td>
<tr><td width="100%">
<img src="http://pics.10026.com/?src=/images/headerMiddle.png" >
<!-- it renders an extra 190px of width right
here -->
</td></td>
<tr><td>
<img src="http://pics.10026.com/?src=/images/headerRight.png" >
</td></td>
</table>
</td></td>
<tr><td id="tdContent"></td></td>
<tr><td id="tdFooter"></td></td>
</table>Hi,
Arthur Dent wrote:
> 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 minimu
m
> 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, whic
h
> 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 additiona
l
> 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 PNG
s
> 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="http://pics.10026.com/?src=/images/headerLeft.png" >
> </td></td>
> <tr><td width="100%">
> <img src="http://pics.10026.com/?src=/images/headerMiddle.png" >
> <!-- it renders an extra 190px of width right
> here -->
> </td></td>
> <tr><td>
> <img src="http://pics.10026.com/?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="http://pics.10026.com/?src=/images/headerLeft.png"></td>
</tr>
<tr>
<td width="100%"><img src="http://pics.10026.com/?src=/images/headerMiddle.png"></td>
</tr>
<tr>
<td><img src="http://pics.10026.com/?src=/images/headerRight.png"></td>
</tr>
</table>
</td>
</tr>
<tr><td id="tdContent"></td></tr>
<tr><td id="tdFooter"></td></tr>
</table>
HTH,
Laurent
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" <galasoft-lb@.bluewin.ch> wrote in message
news:O9lB7zdQGHA.5116@.TK2MSFTNGP10.phx.gbl...
> Hi,
> Arthur Dent wrote:
> 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="http://pics.10026.com/?src=/images/headerLeft.png"></td>
> </tr>
> <tr>
> <td width="100%"><img src="http://pics.10026.com/?src=/images/headerMiddle.png"></td>
> </tr>
> <tr>
> <td><img src="http://pics.10026.com/?src=/images/headerRight.png"></td>
> </tr>
> </table>
> </td>
> </tr>
> <tr><td id="tdContent"></td></tr>
> <tr><td id="tdFooter"></td></tr>
> </table>
> HTH,
> Laurent
Hi Arthur,
Arthur Dent wrote:
> Oops, yah, those extra TDs were supposed to be TRs. Typo - i manually type
d
> 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
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