CSS IE menu fix?
- Started
- Last post
- 18 Responses
- Atkinson
hello, I added a css menu and not being a css guru it only works in firefox / safari mac that I've checked. It doesn't work in IE. Anyone know a fix? http://wwww.craigatkinson.co.uk
- 7point340
you want to adjust the margins on ul li ul li i would imagine.
i've only looked at it for 30 secs mind you
- brains0
what exactly doesn't work about it in IE? It seems to work for me.
- Atkinson0
I checked earlier, not sure which version and the menus were both around 80px left, you couldnt see them under the main div
- Atkinson0
also, you couldn't use the second layer menu
- 7point340
second that "startlist" function is javascript. take that out of your css
- Atkinson0
will try those, cheers
- Atkinson0
hm, I'm not sure about the margins or padding. When I change them they seem out on the mac. I'm not sure what the startlist stuff means, I got it from a tutorial that said use it as an IE fix!
Here's the css:
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;color: #660000;
line-height: 1.3em;
padding: 0px;
list-style: none;
width: 90px;
border-bottom: 0px solid #ccc;
background-color: #ffffff;}
ul li {
position: relative;
}
li ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
position: absolute;
font-style: normal;
left: 90px;
top: 0;
display: none;
line-height: 1.3em;
padding: 0px;
background-color: #eaeaea;}
#nav a:link {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
padding: 0px;
color: #ffffff;
background-color:#666666;
z-index: 1;
}
#nav a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
padding: 0px;
color: #E8FFF9;
background-color: #E8FFF9;
display: block;
}
#nav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
padding: 0px;
color: #FFFF00;
text-decoration: underline;
background-color: #FFFF00;
display: block;
}
#bottomnav a:link {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;color: #660000;
padding: 0px;
color: #666666;
background-color:#eaeaea;
z-index: 1;
}
#bottomnav a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;color: #660000;
padding: 0px;
color: #666666;
background-color: #E8FFF9;
display: block;
}
#bottomnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;color: #660000;
padding: 0px;
color: #666666;
text-decoration: underline;
background-color: #666666;
display: block;
}/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
startList = function() {
if (document.all&&document.getEleme... {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.re...
(" over", "");
}
}
}
}
}
window.onload=startList;
- Stugoo0
give your top ul a margin:0;
works for me with that.
- Atkinson0
which browser? pc / mac? [stugoo]
- Stugoo0
pc ie 7 & ff 2
- Stugoo0
sorry that should be #nav {margin:0;}
- Atkinson0
yeah, I think its ie 5/6 that has probs, I think a lot of people still use those too?
- Atkinson0
ok, any better for that? Anyone with ie 5 / 6 too?
- Stugoo0
it looks like your having a world of problems in IE6 mate.
the flyout isn't working... (could be my ie6 tho)if its really bothering you and you need another solution try :
http://www.cssplay.co.uk/menus/f…- oh my the flyout isn't sitting right on ie7 either... :(Stugoo
- Atkinson0
yeah ie6, I thought so
- Stugoo0
crap mate, Im sorry I don't really have anymore time right now.
if you get really stuck I can try help you some more tommorrow.drop me an email.