|
|
|
date: Mon, 6 Mar 2006 13:37:38 -0500,
group: microsoft.public.inetsdk.html_authoring
back
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="/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>
date: Mon, 6 Mar 2006 13:37:38 -0500
author: Arthur Dent
Re: Table stretching excessively in IE
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 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
date: Tue, 07 Mar 2006 12:47:53 +0100
author: Laurent Bugnion
Re: Table stretching excessively in IE
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" wrote in message
news:O9lB7zdQGHA.5116@TK2MSFTNGP10.phx.gbl...
> 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
>> 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
date: Tue, 7 Mar 2006 09:40:44 -0500
author: Arthur Dent
|
|
