...

View Full Version : IE9 Navigation Menu Not Working



blondy269
11-02-2011, 03:43 AM
I recently 'made' a website (based on a template, not made from scratch). Everything seems to be working fine in all browsers, and also in IE7 and IE8, but the main navigation menu isn't working in IE9, and I can't figure out why.

This is how it looks in everything except IE9:
http://img232.imageshack.us/img232/9178/navigation1.png

This is how it looks in IE9:
http://img510.imageshack.us/img510/2949/navigation2.png

The CSS code for the menu is:

.menu ul {
margin:0
}
.menu {
position:absolute;
top:0;
z-index:90;
left:205px;
}
.menu li {
background:none;
padding:0;
float:left;
text-align:center;
padding:0 2px 0 0;
list-style:none;
margin-bottom:16px;
line-height:1
}
.menu li a {
display:block;
font-size:16px;
text-decoration:none;
position:relative;
color:#fff;
height:42px;
padding:80px 10px 0;
float:left
}
.menu li a:hover {
background:url(images/menu_bg.gif) repeat-x 0% 0%;
}
.menu li a.active {

background:url(images/menu_bg.gif) repeat-x 0% 0%;
}

Any suggestions on how I can get this working in IE9 would be greatly appreciated.

Sammy12
11-02-2011, 03:48 AM
.menu li {
background:none;
padding:0;
float:left;
text-align:center;
padding:0 2px 0 0;
list-style:none;
margin-bottom:16px;
line-height:1
}

.menu li a {
display:block;
font-size:16px;
text-decoration:none;
position:relative;
color:#fff;
height:42px;
padding:80px 10px 0;
float:left
}


for starters:
missing 2 semi-colons

here's the approach you should take:

1. add a semi-colon to line-height: 1
2. take float: left out from .menu li a
3. set a doctype - have you?

bigpacific
11-28-2011, 08:57 PM
Sorry - the site with the issue is http://www.spacemodel.com


Hi. I tried the above fixes (float: left; removed) and there is a doctype set, but still no dice: no menu shows in IE9.

Here's my code, help much appreciated!

Doctype info: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Menu also uses mootools.js, mootools-plugins.js, and dropdown-compressed.js.

#menu

{

background:#262626 url(images/menu_bg.gif) repeat-x top;

border-bottom:1px solid #230808;

margin:0 20px;

height: 49px;

overflow: hidden;

}

#menu .mleft{background: url(images/menu_side.gif) no-repeat left; width: 100%; height: 100%;}

#menu .mright{background: url(images/menu_side.gif) no-repeat right; width: 100%; height: 100%;}

#menu ul

{

width:960px;

height:100%;

overflow:hidden;

}



#menu ul li

{

list-style-type:circle;

font-family:Arial, sans-serif;

font-weight: 700;

line-height: 49px;

color:#E6E6E6;

font-size:12px;

text-transform:uppercase;

text-align:center;

background:url(images/menu_side.gif) no-repeat right 0;


margin:0 0 0 15px;

padding: 0 15px 0 0;

}



#menu a:link,#menu a:visited,#menu a:active,#menu a:hover

{

color:#E6E6E6;

text-decoration:none;

}

Excavator
11-28-2011, 09:07 PM
Hello blondy269,
Actually your fine with no semi-colon on the last property of each selector in your CSS, just like you have it.

It would help to see the rest of your code. Even better, a link to the test site since your menu has images we can't see.

blondy269
01-17-2012, 04:23 AM
Hi guys, I still haven't been able to find a solution to this problem.

Any other ideas or suggestions on how to fix this would be much appreciated.

Arbitrator
01-17-2012, 09:16 AM
Any other ideas or suggestions on how to fix this would be much appreciated.http://cufon.shoqolate.com/generate/ provides a solution.

I don't know what the actual cause of the issue is. Perhaps it is related to the fact that Cufón injects custom, non-XHTML elements into your XHTML document.

blondy269
01-17-2012, 10:30 AM
Thanks very much, updating cufon fixed the problem. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum