My Multi Level drop down menu is looking weird in IE 8

**simo711** · 07-18-2012, 02:32 PM

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: I have been using this menu for quite a long time and just now decided to look at it in IE 8. Bad idea because it's looking really messed up.

I checked over my CSS for the code and can't seem to find my mistake. I hope it's an easy one because I can't figure this out.

Could someone please help? It's on this site http://www.freebiesandmuchmore.com

Thanks, Chris

**jscheuer1** · 07-18-2012, 03:15 PM

And there's the same problem in IE 9. I thought it might be the IE conditional stylesheet, but taking that out didn't help. There's probably a better way to deal with this but it might take quite a bit of investigation and/or redesign/coding, or not. I wouldn't know until I got into it.

The page does appear to work well in IE 7 though. You have the meta tag for that (IE 7 emulation), but it comes too late in the head to take effect.

Move this (highlighted):

Code:

 . . . nk rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=3704587057900182541" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://www.freebiesandmuchmore.com/" />
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=110 . . .

To here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<link href='http://i694.photobucket.com/albums/vv302/csblog711/FandMM.png' rel='image_src'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var a=window,c="jstiming",d="tick";var e=function(b){this.t={};this.tick=function(b,o,f){f=void 0!=f?f:(new Date).getTime();this.t[b]=[f,o]};th . . .

That fixed it for me.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**simo711** · 07-18-2012, 03:22 PM

Actually, I found I had an extra </li> in the list...argh! Thanks for the help though!

Chris

**jscheuer1** · 07-18-2012, 03:59 PM

I see that. The:

HTML Code:

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

tag is still not being used though. You may as well get rid of it.

And you shouldn't need the IE specific script (the one that does something to emulate or help with HTML 5) for IE 9, perhaps not even for IE 8.

You can change that tag to:

Code:

<!--[if lt IE 9]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Thread: My Multi Level drop down menu is looking weird in IE 8

Thread Tools

Search Thread

My Multi Level drop down menu is looking weird in IE 8

Bookmarks

Bookmarks

Posting Permissions