IE6 + table + padding + width [Archive]

vleidl

06-19-2006, 05:38 AM

Hi,

Could anyone please explain me why IE 6 cuts off the right border upon displaying the following HTML code?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table style="width:100%;border-collapse:collapse">
<tr>
<td style="padding:0.5em;border:1px solid black;">
<table style="width:100%;background-color:green;border-collapse:collapse">
<tr>
<td>
Test
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

It seems that IE ignores the padding of the surrounding td when it calculates the width of the nested table.

The page renders correctly when I remove the doctype or, as usual, when I open it in Firefox.

Cheers,
Volker

Valli

06-19-2006, 05:58 AM

Hi,

If you use the following code as below, the right border will not be cut off.Here the width of the second table is reduced to 98%. The reason is when the both the table are of same width , the second table gets overflow and the contents get hidden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<body>
<table style="width:100%;border-collapse:collapse">
<tr>
<td style="padding:0.5em;border:1px solid black;">
<table style="width:98%;background-color:green;border-collapse:collapse">
<tr>
<td> Test </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

For further clarification u can refer.

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Regards
valli

WebJoel

06-19-2006, 06:27 AM

Or you could do it this way and still have 100% width for both tables, -including the nested one. By 'padding' the populated td with a 4-pixel wide white border, you compliment the 1-pixel black border of the container-table.

This way, it is RESIZABLE. :) Try re-sizing the example above and at around 800-px wide, you start losing the right-end again... This way, you will not.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table style="width:100%; border:1px double black; border-collapse:collapse">
<tr>
<td>
<table style="width:100%; background-color:green; border-collapse:collapse">
<tr>
<td style="padding:.5em;border:4px solid white">
Test
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

vleidl

06-19-2006, 09:46 AM

First of all, thanks to both of you for the help.

I guess I can make one or the other solution work for my application.

Yet, I still wonder why IE exposes this behaviour. In my understanding a percentage width of an element is interpreted relative to the width of its parent. In this respect I reckon the two tables should not have the same width, as Valli claims, because the parent element of the inner table is not the outer table, but the outer td element. The td in turn has a padding defined (in my example) that reduces its width (i.e. the width of the content according to the W3C CSS box model).

Since I specified a valid DOCTYPE, IE6 should apply the W3C box model. I would expect IE to break the layout if I dropped it. But the exact opposite is the case.

Did I get something wrong here? Is there a reasonable explanation for this behaviour?

Regards,
Volker

KDLA

06-19-2006, 12:37 PM

Padding is rendered differently in IE than in Fx. IE adds it to the outside, while Fx applies it within. Thus, something will appear wider in IE than in Fx.

At least, that's my experience with it. :rolleyes: