New clearing method needed for IE7?
With the release of the MIX06 build of Internet Explorer (“Internet Explorer Beta 2 Preview - released on March 20”), Microsoft has declared IE7 “layout complete”. What that means is that no new CSS features will be added. This is what you get in the final IE7, though there may still be bug fixes.
So, now is the time to start testing. I haven’t been able to test the latest IE7 myself, but it now supports the
max-height properties. Great! Less great is that according to Chris Wilson’s answer to Peter Gasston’s question, IE7 will not support the
:after pseudo-elements, and neither will it support the
Ouch. Missing support for
content may cause you problems, depending on the CSS you have used to take care of certain things.
Why is that? Well, IE used to have a box model bug which caused it to resize a box to contain any floated children it might have. The easy clearing method described at Position Is Everything uses that to create a very convenient way of clearing floats without having to add extra markup. Unless I’m wrong that method will not work in IE7, since the box model bug was fixed in the original IE7 Beta 2 Preview.
If that is the case, here’s hoping that someone is able to come up with a markup-free way of clearing floats that works in IE7. Otherwise those of us who – like me – have been using the easy-clearing method will have to revisit every site that uses the trick and add clearing elements.
Speaking of clearing elements, I have never been able to come up with the CSS for a heightless clearing element that works consistently across browsers. And it looks like there will be an increased demand for those later this year.
Anyone out there sitting on a bulletproof markup and CSS clearing combo?
Update: The trick is to add
display:inline-block and then
display:block to the easyclearing rule:
/* Hide from IE Mac \*/
/* End hide from IE Mac */
And to keep IE6 and earlier happy, use your favourite method (Conditional Comments or a CSS filter) to send them the following:
Thanks Ingo for providing a link to the solution.
Update 2: Andy Clarke asked some of the IE developers about this and other questions raised in the comments here. Find the answers in Clearing floats without structural markup in IE7.
- Previous post: VisioVoice makes VoiceOver multilingual
- Next post: Target sued for refusing to make their website accessible