IE8 is borking my menu!

HTML & CSS
1

I have a dropdown menu which is doing something really janky in IE8 and I’m not entirely sure why. I must be missing something staring me clear in the fact as it breaks in fairly spectacular fashion, despite working fine in IE7, IE9, Firefox and Google Chrome. It even looks okay in IE6 bar a few minor glitches. But in IE8 is 100% borked!

Here’s a live demo:
Test site for Hugh

Here is what it should look like as seen in Google Chrome (looks the same in IE7, IE9 and Firefox):

Here it is in IE8:

Any help debugging this would be much appreciated thanks :slight_smile:

2

This should be pretty simple, in your if brackets you’ve got:


<!--[if lte IE 7]><script type='text/javascript' src='http://pixopoint.com/wp-content/plugins/pixopoint-menu-animations/scripts/suckerfish_ie.js'></script>
<![endif]-->

lte is: less than or equal to. So you need to make it work for IE 8 as well, so try:

 <!--[if lte IE 8]><script type='text/javascript' src='http://pixopoint.com/wp-content/plugins/pixopoint-menu-animations/scripts/suckerfish_ie.js'></script>
<![endif]-->

That should fix it for ya.

-Jordan Austin

3

Okay, so I just tested this and see it didn’t fix the issue. I’ll tweak some more, and hopefully someone else can jump in as well.

-Jordan Austin

4

Hi Ryan,

It’s the last-child rules that is killing IE8 as it doesn’t understand last-child but also seems to forget about the other comma separated rules afterwards.

e.g.


a:last-child,a{background:red;display:block}

That gets no colour in IE8.

Just put the last child rules on lines of their own with no other comma separated rules.

5

Thanks Paul. I wasn’t aware of that bug in IE8.

I’ll try to lodge that in my brain for future use :slight_smile:

6

That did the trick just nicely :slight_smile: Thanks!

Test site for Hugh

7

Actually, it’s not a bug as such (Tommy confirmed this) but the way that browsers are supposed to handle rules that they don’t understand. They are instructed to ignore the whole rule block even in a comma separated list and if they meet a pseudo element they don’t understand they will just stop right there and go no further with that rule.

Therefore when using pseudo elements you should always use them on a single line of their own. Counter-intuitive and counter-productive I know.

8