My menu - Firefox, Chrome good IE Bad

HTML & CSS
1

Hello,

I wonder if someone might be able to cast a look at my problem here http://uprotect.squabit.com

I am fixing up my friend drupal site and I have come a little stuck.

I have a horizontal top menu with a few links in it - it displays as desired in a horizontal layout in FF et al but the in IE it doesn’t

I wonder if somone might point me in the right direction

Thank you for looking

David

2

Hello :).

Now why would you have this silly line of code:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Doing that makes a perfectly good version of IE(9) and makes it splurt out garbage rendering, that of IE7. The actual problem is that, with that in there, IE7 has something called haslayout, which can cause many issues.

Hmm, it appears that you did something on the page. Did you fix it? Even if it was by some other cause, (as I’m posting it, you’ve fixed it it seems), you need to remove that emulate IE7 nonsense :).

I took that out and it started working, however, I tried again with some fresh source code from your site (to double check) and it was fixed from the get go. So I don’t konw what to think ;).

3

wow thanks for spotting that!!! Awesome job. It’s a drupal template from “template monster” or something that he said he paid for! I guess its an old one as that is rubbish I have now change this
<title><?php print $head_title ?></title>
<meta http-equiv=“Content-Style-Type” content=“text/css” />
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” />

to this

<title><?php print $head_title ?></title>
<meta http-equiv=“Content-Style-Type” content=“text/css” />

Thank you very much i was looking at the style sheet and never though to look at those tags. I learned something today !

4

Hi,

It will still be broken in IE7 though because that’s what you were emulating with the meta tag. The problem in IE7 is that you have a class on the list item called .leaf which is set to clear:both and that’s exactly what IE7 does and renders each item on a new line (even though the list has been set to display:inline and the clear should be ignored).

Remove the clear:both for the list item and iE7 will render in one line.


.headertop .menu li{clear:none}

You also have 2 javascript errors that you need to fix. Looks like you are using a jquery function without jquery present.

Timestamp: 05/04/2012 22:14:45
Error: $ is not defined
Source File: http://info.template-help.com/files/ie6_warning/ie6_script.js
Line: 1

Timestamp: 05/04/2012 22:14:45
Error: Cufon is not defined
Source File: http://uprotect.squabit.com/
Line: 148

5

Thank you paul