SiteCrafting, Inc.
27 Apr
Percentage Width Margin Table IE Bug
Internet Explorer has its share of bad bugs. IE6 in particular is well known for it laundry list of CSS bugs. While troubleshooting some code for a newsletter I discovered a rather bizarre one. After testing, I found that it affects everything from IE6 to the recently released IE8. It is mostly just for fun because the chances of running into it are pretty slim.
The HTML looks something like this:
<html>
<body>
<table><tr><td>
<div style="width: 100%;">
<p style="margin-left: 100%">
Content
</p>
</div>
</td></tr></table>
</body>
</html>
The HTML looks something like this:
<html>
<body>
<table><tr><td>
<div style="width: 100%;">
<p style="margin-left: 100%">
Content
</p>
</div>
</td></tr></table>
</body>
</html>
The structure of this bug is a table cell with a block-level element inside with a css width of a percentage. Inside that is another block-level element with a margin as a percentage. The table cell, for some reason, expands to more then a million pixels. In the code above, nothing can be added to fix this problem (i.e., body width, table width, cell width, or any combination). Changing the width or margin to any percentage only changes the scale of the extremely large table cell. Switching from margin to padding doesn't seem to fix it either. Interestingly enough, changing the margin-left to margin grows the table cell both height and width. Or, if the width is changed to a height, it still expands.
I don't know a great deal of the inner workings of Trident (IE's layout system), but my guess is that some how the table cell is given a huge width when a margin is detected and then attempts to size itself like elastic to its contents. This would cause the div to see that the width is very large and set it's pixel size accordingly. But, this is nothing other then a guess. Does anyone have any better hypothesis? Post your thoughts below.
Browser Bugs, CSS, From the Workbench
by Paul Sayre | 4/27/2009 6:35pm | Comments (3)
by Paul Sayre | 4/27/2009 6:35pm | Comments (3)
I'm having a similar issue where setting an element's margin to a percentage is having strange results on IE. IE7 totally disregards the value, whereas IE8 sets it randomly... oh the fun..
Left by Pablinho | Jun 30, 2011
B6cwXG I really enjoy the article post.Really looking forward to read more. Much obliged.
Left by Adobe OEM Software | Mar 7
Thanks for sharing, this is a fantastic article.Really thank you! Will read on...
Left by wholesale men clothing | Mar 20