This one’s just for the CSS gurus out there. I have a serious IE7 (Beta 3) problem and I’m stumped. In a nutshell, it seems like there is a bug in IE7 whereby in standards mode float left on a child element does not work if the parent is positioned. It seems like the parent inherits the width of the window, not the width of the window minus its left offset or padding.
Here’s what the code looks like (minus any DOCTYPE stuff):
<div style="border: 1px solid black; position: absolute; left: 250px;">c
<div style="border: 1px solid black; width: 300px; float: left;">Left</div>
<div style="border: 1px solid black; width: 300px; float: left;">Right</div>
Here are the examples:
Open the above link in IE7. If you size to 1024 width or above, everything is great. But watch what happens when you incrementally resize down. Instead of floating downward, the right side div scrolls off to the right until you reduce the window size to a width smaller than the width of the two divs combined.
In all other browsers this works fine. There is no special CSS involved, no box model hack, nothing like that. This occurs with any DOCTYPE I’ve tried (XHTML, DHTML, strict, loose, transitional). This makes sense, I guess, since any of these DOCTYPEs should keep IE7 in standards mode.
However, if you force IE7 into quirks mode, everything is fine:
The only difference in the above link is that the DOCTYPE and xmlns attributes have been omitted. As I understand it, this makes IE7 operate in “quirks mode.” But why does this very simple layout require quirks mode? And if it’s non-standard, why does it work in Firefox?
I know, the simple solution would be to run quirks mode by omitting the DOCTYPE. But I can’t. Why? Well, here’s the irony, this project is for a certain software giant, which I won’t name, but they have a product with the initials I.E.
If you can offer any suggestions, please post a comment. Thanks!