Horizontal menu stepping down in IE6

I can’t see what I’ve done wrong here: http://robcubbon.com/dev/lunakidz/

The six list elements of the top menu “step down” by 10px each time in IE6 instead of being straight horizontally.

The CSS is really simple.

#navbar {width:769px; height: 46px; background:#333333; margin-top: 10px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; color:#000; font-size:10px; font-stretch:condensed; font-weight:bold;}

#navbar ul{padding:0; margin:0; list-style-type:none; line-height: 32px; }

#navbar li {display:inline; }

#navbar li a{float:left;width: 128px;color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; height:46px; }

#navbar li a:hover {float:left; width: 128px; color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; background-position: 0 46px; height:46px; }

#navbar li.current-page a{ float:left; width: 128px; color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; background-position: 0 46px; height:46px; }

I prefer to download IEtester (a very nice program) which allows you to see IE6/7/8 all in one.

Sometimes the program crashes, but in that case just fire it back up. It’s pretty reliable :slight_smile:

You can use compatibility view to get a rough idea of what IE7 will look like but it’s not 100% accurate and misses some bugs in IE7 which would be the main reason for using it. The same applies with the Developer tools options.

None of the options recognise this IE7 bug.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE7 general sibling selector (~) bug 1</title>
    <style type="text/css">
/* The ruleset below (empty or otherwise) is required for the bug! */
.holder b {
.holder ~ span b {
    background: red;
<div class="holder">
            <span><b>My background shouldn’t be red!</b></span>

Therefore I could never trust it as I test in different browers to find bugs not ignore them :slight_smile: It’s ok for a rough idea and useful for a quick check but don;t rely on it. (Unlike IEtester which Ryan mentioned above and spots the bug correctly.)

Note that the quirks mode option in IE8 makes IE render in quirks mode which will be similar to IE5 but again not accurate enough for any real testing. There is no option to emulate ie6.

All in all it’s more a fiasco than a help. It introduces three or four more rendering inconsistencies to deal with.

There are many other options with the [URL=“http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx”]emulate tags also (none of which actually provide a true rendering of a browser version unfortunately.)

you can use quirks mode also in ie8. no need to “30 minutes for BrowserShots” :slight_smile:

You’re all right! #navbar li {display:inline} did the trick. It is updated now. I’m really sorry I supplied the wrong CSS. I’d been changing things and waiting for 30 minutes for BrowserShots, changing things and waiting for 30 minutes for BrowserShots, changing things and waiting for 30 minutes for BrowserShots, etc. And I must have got confused!

Ok - I might try it again it was a while ago. :slight_smile:

well, ie collection earlier builds were like that. but with the new ones i never had problems so far.

Yes to test everything exactly would be a nightmare and in reality we can’t really do that viably. I do have XP, vista and windows 7 on different machines with varying versions but its such a pain to switch between computers that I just use IEtester (although it does crash a bit)

or have an ie collection: http://utilu.com/IECollection/.

I tried to install the IE collection from here some time ago but it crashed really badly and I had to reboot the whole system losing work in the process. Of course that may be it just doesn’t like my set up but I believe it does much the same job as IE tester anyway. At least the IEtester only crashes itself :).

It’s a shame there isn’t a really stable version around of either one.

Previously I used the tredosoft version but it’s not maintained anymore (and was buggy anyway)

Lets agree to disagree here :slight_smile:

My standing
IEtester for windows
Collection for non windows

ok, from the top.

ie collection gives you the opportunity to test ie v1 to v8. meaning you can install any combination or none of those versions. there are actually check boxes for each version :slight_smile: nothing unfortunate here. side note - ie collection gives you ie1.5, ie2.01, ie3.0, ie3.01…, ie8.

ie collection also requires one download. it’s a single exe file with an install wizard.

almost no diff… moot point.

most people use windows… very moot point.

i’m the exception not using windows… extremely moot point.

Unfortunately you only need IE6/7/8. Thus IE collection really only benefits you by giving you IE6/7/8. Same as IEtester. Side note-IEtester gives IE5.5

IEtester only requires a download. As for VMs, they take a lot more work to get done, and it being real IE makes almost no difference at all, when comparing it to IEtester (an emulator)

In all my time using it, I’ve never seen a bug come up on real IE and not on the emulator. Not once.

And yes, for most people (aka window users) IEtester should be used

However if your the exception and you don’t use windows, then yes use the VM

No you don’t. In the case of a crash, just reboot the tab up. It doesnt crash a second time.

yes you do. ie collection, again, gives you the opportunity to test ie v1 to v8. real genuine ie. which is always better then an emulator.

and vms for non-windows os :slight_smile: you do know some test for ie in a non-windows envir, don’t you? your IEtester only works on windows os. so you need vms for others. IEtester or not :slight_smile:

which ever (i mean having a doctype or not, or having a doctype and using the developer tool to switch to quirks mode). by using developer tool you can choose to see how ie7 handles quirks mode or how ie8 handles it.

As Ray said the #navbar li {display:inline} is missing in your live site and it is this that fixes the staircase effect (although there are other methods).

What happens is that IE7 and 6 don’t collapse the list height to zero but leave it at the current font-size/line-height and therefore each subsequent list is moved downwards but the float still snags on the floated anchors edge.

If you set the list to display:inline then it stops this effect and you can more or less forget about the list. You could instead float the list also or as mentioned above set the line-height/font-size to zero so that there is no height to the list but the easiest solution is display:inline and is the one you already had written down in post #1 :slight_smile:

if you keep it without

#navbar li {display:inline; }


#navbar ul{padding:0; margin:0; list-style-type:none; line-height: 32px; }

could be

#navbar ul{padding:0; margin:0; list-style-type:none; line-height: 0; }

and you could set a padding-top:12px for your a’s in li’s.

even more, on hover you could set a bigger/smaller padding-top for them and get a nice effect :slight_smile:

The css you posted above is not the same as on the site.

The #navbar li {display:inline; } is what fixes the IE staircase bug but it is not in your live css.

It could also be #navbar li {float:left; } to fix the bug

Thanks for this discussion guys. I’d used IETester before but had given up with it because it was crashy and I’d heard somewhere that it wasn’t that accurate. But I’ll definitely give it another go. I’ll try IE Collection too. Thanks!

it seems that you do :slight_smile: with ie collection you can test for ie v1 to v8.

if you want to go that way, the only viable way to test how it would really look in ie6 or ie7 is to actually have ie6 and ie7 at hand, using multiple ie installations if windows os, or vms for ie6 & ie7 if windows or any other os that’s supporting vms :slight_smile:

or have an ie collection: http://utilu.com/IECollection/.