You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 18

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

phantom spaces which causes a gap in IE 7

Gaps in the lower part of the homepage

phantom spaces which causes a gap in IE 7

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

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.

gap disappears in IE 7 when removing line breaks and space in the code

Removing breaks and spaces in the structural code

structural code in DreamWeaver

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:

my blog in IE 6 before fixing

Other interesting links about IE 7


28served

gravatar

1

permalink this comment Jason Tue Apr 18, 2006 at 05.06 am

Very insightful.  Thanks.  Glad to see the IE team is starting to listen ;)


gravatar

2

permalink this comment Biggi Tue Apr 18, 2006 at 05.18 am

Thanks for the interesting article. I do not want to download the IE7 (yet), so an insight into new features and possible bugs is more than welcome.


gravatar

3

permalink this comment Carl Camera Tue Apr 18, 2006 at 05.30 am

Veerle, this looks like the Whitespace bug. Nick Rigby may have a css workaround that does not require adjusting the source xthml.


gravatar

4

permalink this comment Veerle Tue Apr 18, 2006 at 05.55 am

@Carl Camera, yes you’re right, I wasn’t sure about how this one is called (and if it had a name). I’ve updated my article, thanks for the info and link. Hopefully, giving the block element a width will help (since the height is no option for me, it’s not fixed).


gravatar

5

permalink this comment David Rolfe Tue Apr 18, 2006 at 07.38 am

Thanks Veerle, you have just helped me resolve a problem with one of my sites.  Adding a width to the <li> css now corrects the problem in IE.

I had tried for weeks to find a solution thinking it was me and not a bug…!


gravatar

6

permalink this comment Dustin Wilson Tue Apr 18, 2006 at 08.21 am

This is a problem I’ve ran into for years. Hopefully they will fix this before the final release.

Stupid me thought they were going to support display:table and other derivs, but I was wrong. I’m having to recode my site. Luckily my PHP code isn’t tied in with the markup, so switching markup and CSS isn’t such a big thing.


gravatar

7

permalink this comment Ronald Poi Tue Apr 18, 2006 at 09.45 am

Is really that hard for Microsoft do something good?... at least one thing?... Internet Explorer is still the most used browser around, they should they care of what is wrong with that useless browser they made… I’ll make my sites 100% compatible with most modern browsers, like Firefox, Opera, Konqueror or Safari. If IE7 wants to take my code right, welcome, if not, i wont care…


gravatar

8

permalink this comment nicole Tue Apr 18, 2006 at 11.06 am

I’m amazed to hear that the IE peeps are so receptive to feedback from users. I’ll forward this link on to Eric… :)


gravatar

9

permalink this comment John Beales Tue Apr 18, 2006 at 11.39 am

It’s great to see some articles being written on IE7’s rendering abilities. I am testing my sites in IE7 but really like to know other people’s experiences as well.

For those of you who arent downloading Internet Explorer 7 yet because you want to still be able to test in IE6, (which we’ll all have to be doing for a year or two to come), you can use the IE7 Standalone Launch script to run the two browsers on the same machine.  I find it very handy…

More info


gravatar

10

permalink this comment Daniel Tue Apr 18, 2006 at 08.32 pm

When I open your site in firefox 1.0.4, there is a gap between your main navigation links (home, about, archive, etc…) with the bottom of your header picture. In IE 7, it doesnt happen. do you know anything about this?


gravatar

11

permalink this comment vanni Tue Apr 18, 2006 at 10.12 pm

If Microsoft is listening: forgetaboutit!!  You don’t do standards. You are an bad web citizen. You don’t bring anything useful to the web community. It’s time you relinquished the browser turf to Firefox. Just reading about the machinations that one has to go through to make it work in IE7 is enough to make me toss my cookies. Why bother. We should all mount a campaign to tell the world to switch their browsers to Firefox, and that using IE>7 is a bad idea. We should quit bending over backwards for them. So they are the major web browser… so what! Once people get the message that MS is making life miserable for web developers and others they will understand and get Firefox. We have to start somewhere. I AM MAD AS HELL AND I AM NOT GOING TO TAKE IT ANY LONGER.


gravatar

12

permalink this comment Veerle Wed Apr 19, 2006 at 01.37 am

@Daniel said

When I open your site in firefox 1.0.4, there is a gap between your main navigation links (home, about, archive, etc…) with the bottom of your header picture. In IE 7, it doesnt happen. do you know anything about this?

No I didn’t know that and I’m not gonna to bother with it to be honest since I spend my time efficiently. Update to Firefox 1.5.2, that’s the recent browser and from 1.5 upwards everything is fine. Besides your browser has security issues, so you should update anyway. Sorry, I hope you understand.

@vanni, I don’t agree with you. They’re doing an effort now, and IE 7 is a huge landmark. Any effort in making our life easier is worth it.


gravatar

13

permalink this comment Matt Keogh Wed Apr 19, 2006 at 04.56 am

At the end of the day the release of IE7 will mean that we have yet another browser to test on.

It’s going to be years before we can forget about IE5x and much longer before we can forget about IE6.

If MS update IE7 every year you can bet that each of them will have their own issues and we’ll be testing for each version.


gravatar

14

permalink this comment Daniel Wed Apr 19, 2006 at 09.06 am

I understand. I haven’t been using firefox at work for a while, I openned your site at home with newest firefox and it fine. The reason I commented was that I saw a gap (with old firefox) after reading this article about fixing for ie 6. So I wonder if it causes that gap. Cause i always uses firefox (1.5) at home and I didnt remember seeing that gap.


gravatar

15

permalink this comment Matt Smith Wed Apr 19, 2006 at 11.09 am

I’ve been waiting for a few clear days in my work so I can partition my PC and install IE6 and IE7 for testing. All this info is a great help - thanks!

Hopefully I can contribute something useful, even if it might seem obvious to some (it didn’t to me). It’s this:-

Once you install the IE7 beta, you won’t be able to find or use IE6 on your machine, so that’s worth bearing in mind given that IE7 wont be released for a few months. I’ll certainly have to make sure that sites I design are compatible with both 6 AND 7.


gravatar

16

permalink this comment Ronald Poi Wed Apr 19, 2006 at 12.52 pm

“At the end of the day the release of IE7 will mean that we have yet another browser to test on”...

Yes, and were you thinking about we the Mac users?... we can’t install nor test IE7, i’ll be forced to install Windows on my Mac just for test my webpages… that’s why nobody should use (care) about IE7…


gravatar

17

permalink this comment Veerle Thu Apr 20, 2006 at 03.29 am

In my opinion, the Web is for everybody, including IE users. Web Standards means “for everybody”, in other words any platform, any browser etc.

And about IE, I share Eric Meyer’s opinion on this :

I’m also impressed with the CSS and other advances in IE7, and with how the IE team is managing the development process to accommodate the needs of Web developers and designers. They didn’t have to do any of that. After all the crap they’ve had dumped on them the last decade or more, they have every reason not to care about what’s best for the Web. Despite this, they still do. Recognize and respect that, if nothing else.


gravatar

18

permalink this comment Mathew Byrne Thu Apr 20, 2006 at 08.06 pm

I’m really impressed with what Microsoft has done so far with IE7. They seem to be listening to the community a lot more nowdays.

We all know that IE is not an easy thing to cope with, and for the web-design population, other alternatives are common. However for the rest of the world, IE does what it’s supposed to, and it’s sites that break under it that are doing the wrong thing.


gravatar

19

permalink this comment Jim Callender Fri Apr 21, 2006 at 08.27 am

Great to have this broken down like this, good to hear that MS are listening. Less hacks in IE means cleaner code for all.


gravatar

20

permalink this comment Shur Fri Apr 21, 2006 at 02.37 pm

Very impressed….


gravatar

21

permalink this comment Olav Sat Apr 22, 2006 at 09.02 am

It’s some great things they’ve fixed.

Still I can’t help but think that fixing ALL the bugs requires so little effort from their side, compared to the combined frustration of all the web developers who has to work around them in the years to come. Pity..


gravatar

22

permalink this comment David Weingart Tue Apr 25, 2006 at 01.57 pm

Another fix for this bug is to set display: inline on the containing list item.


gravatar

23

permalink this comment Veerle Wed Apr 26, 2006 at 02.50 am

@David Weingart said:

Another fix for this bug is to set display: inline on the containing list item.

I still have to look into this, haven’t fixed or done anything yet. I’ll definitely try it out. Thanks for the tip.


gravatar

24

permalink this comment PoG Mon May 1, 2006 at 06.03 pm

Blah, blah, blah.  It’s time to stop whinging about IE and its bugs, and actually learn to work with/around them.  I make a lot of sites, and all of them work exactly the same in IE and FF.

Anyway, lesson time.  On <li>‘s, IE puts about a 3px margin underneath.  Two work arounds:

1) use a condition css file for IE to make a -3px bottom margin on li’s.  This works OK for standard size text sizes (ie View -> Text Size -> Medium) but can break up in the other sizes.

2) best work around. for <li>‘s set both height: and line-height: to the same value.  Ta da, 3pm gap gone.  Works in all text sizes too. 

See it in action

The main menu to the left of the top image, properly spaced in IE and FF.


gravatar

25

permalink this comment imposer Thu May 4, 2006 at 06.14 am

Regarding Meyers (and yours) opinion on Microsofts web-standards policy; You seem to forget that Microsoft have been dumping crap on US for the last six years.

Communism is all nice a well on paper, but in reality, the only reason for Microsoft to finally step up and make some improvements is the rising popularity of alternative browsers, combined with the upcoming Avalon/Vista/whatevertheycallittoday. Just as the only reason for them NOT to step up earlier is exclusively a business strategy. By owning the vast majority of browser share, while not updating the browser in any significant way, they crippled the evolution of the web and web-based applications long enough for them to get Vista out and thereby having another dash at total browser domination.

And, guess what, as soon as they have that, they will stop updating Internet Explorer again. Just like in 1999. It is a very simple strategy, and it works.

Don’t fool yourself. Microsoft is not “being nice” to us developers, they are not “stepping up” now. They are securing their future in terms of business. That is all. Once they get to a point where improvements on IE doesn’t generate direct revenue, we’ll be back on square one.


gravatar

26

permalink this comment Hedonist Thu May 11, 2006 at 07.31 am

I had gap problems with list in IE6 and I solved them with addinf display:inline to li tags(a tags were display:block).Not sure about IE7 but this might be helpfull.


gravatar

27

permalink this comment Mark Goddard Tue Jun 6, 2006 at 02.16 pm

There is also another VERY WEIRD workaround which I have not seen done anywhere else yet.

Go into your source code;
<li>home</li>
and change to;
<li>home   </li>

Simply add three spaces after the word and it fixes it. Very freaky. Try it.


gravatar

28

permalink this comment vanni Mon Jun 12, 2006 at 05.24 pm

I am revisting this thread, because IE 7 is a pain! I spent a lot of time doing a css-only web site, that, frankly won’t pay too much. I had it working and looking great on all browsers except IE6. But I thought, surely it will be fine in the new improved IE7. So off I went to a computer store to vist my project on IE7. And guess what. It’s broken!! So much for IE. I cannot waste more time on this project to get it to work on IE. So my partner is making it work by using tables, much as I want to stick to pure css, I have to give in on this one. As my co-worker pointed out… “there all kinds of new, feature rich sites still built with tables” .. and they work. Question: if css can work in Safari, Firefox, Opera, ... why not in IE7??

Why is that browser so different?



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist