Internet Explorer 7 and phantom spaces when using lists
2006 at 03.05 am posted by Veerle Pieters
Microsoft released a new Beta preview release of IE 7 at MIX06 a few weeks ago and said that it is feature complete and that no stuff will be added anymore. For me this was the perfect opportunity to test how my blog renders with this new version. For those who have no intension to read further I can say the browser is doing very well and there was only 1 minor issue but more on that later. There are still some bugs left but to me it is surprising that Microsoft is actually listening to us now and that alone is a very welcome change. The IE team has also set up an Internet Explorer Feedback site and issues reported during the IE 7 Beta 2 will be looked at. They will do their best to fix issues reported. So that’s why I wrote this article.
Easy clearing method
It's good to read that so many things will be fixed but as always some areas remain that need attention like for example the "easy clearing method" because of the fix of the box model in IE 7 beta 2. The "easy clearing method" is a very convenient way of clearing floats without having to add extra markup. But as always Roger has the skinny on that one and even a solution so I recommend a visit to 456 Berea Street for more explanation on how this can be fixed.
Escaping float bug, outline, content, and display:table properties
One of the other bugs that are still in need of some attention is the escaping float bug, this bug apparently needs a major code re-architecturing that they simply couldnÃ¢â‚¬â„¢t do in IE7; itÃ¢â‚¬â„¢ll come in a later release. Bill Gates himself said that they want to update Explorer on a yearly basis. To be honest that's the only bug that is left from the whole list on on Position is Everything. We will also have to wait for support of the outline, content, and display:table properties.
Transparent PNGs, :hover, zooming function etc
But like I said my feeling is very positive towards their efforts and I like transparent PNGs, :hover on any element, and fixed positioning. The implementation of the zooming function solves the pixel-unit text scaling problem. Absolutely positioned text will no longer scale out of its block, since the block scales equally as well.
My blog in IE 7 beta 2
Now that we have all that out of the way I installed the latest IE 7 build and had a look on how my site would be rendered. As far as I can see, my site looks perfect in IE 7, with the exception of these nasty gaps in all my lists. Here are 2 screenshots and as you can see things look OK except for this one bug that apparently isn't fixed (yet?):
Gaps in "Previously" links
Gaps in the lower part of the homepage
Isn't this rather strange? I don't see anything mentioned about a bug on ordered/unordered lists. This is the same bug I encountered in previous versions of IE. The ol's and ul's have phantom spaces inserted between elements if the li's in the (X)HTML are on seperate lines.
Update: Apparently this is called the white space bug. Thanks Carl Camera for refreshing my memory ;)
Structural code in DreamWeaver
How it looks when removing breaks and spaces
As soon as I remove breaks and spaces things look OK, the gaps are gone. I use a conditional comment for IE 6 to fix this.
Removing breaks and spaces in the structural code
How it looked in IE 6 before fixing
As you can see in the picture below there is a big difference in how it looked in IE 6 before I started fixing: