Comments
IE7 issue: CSS horizontal menu
Written By guillaumeb on Mar. 17, 2008.
2 Comments
Report Note
+ Clip This
Hello, I corrected most of my error in the validator (there is only one left coming from a pluging but this one is not important at all)
My problem is that my horizontal CSS menu displays well in Firefox (Win or Mac) and safari but it is still vertical in IE7. basically the
This is the code that I am using for the CSS is:
#nav {margin-right:20px;margin-top:12px;width:1100px;}
#nav ul {margin: 0;padding: 0;cursor: default;list-style-type: none;display:inline;}
#nav li {display: table-cell;position: relative;padding: 2px 10px;font-family:Arial;font-size:11px;width:10px;}
#nav a, a:visited {text-decoration:none; color:#666666;}
#nav a:hover {background:#CC6644; padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px; color:#FFFFFF;-moz-border-radius:2px;-webkit-border-radius:2px}
#navleft {float:left;width:420px;}
#navright {float:left;width:350px;margin-top:-5px;}
I tried changing display:inline; to display:block; but the problem persits
Do you know where this might come from, I can't figure it out.
Mike
Written Mar. 17, 2008 / Report /
Seems overly complicated for the effect you're trying to reproduce. Horizontal tab navigation is pretty simple. Here's the HTML:
<ul><li><a href="#">Link Here</a></li><li><a href="#">Link Here</a></li></ul>With this CSS:
ul {padding: 0;
margin: 0;
height: 30px;
list-style: none; }
ul li {
display: block;
float: left;
padding: 0;
margin: 0;
height: 30px;
font: bold 14px/30px Verdana; }
ul li a {
display: block;
float: left;
height: 30px;
padding: 0 8px;
margin: 0;
color: #333;
background: #f3f3f3; }
I'm setting height on everything and skimped on font declarations but this is all you really need. For horizontal, tabbed navigation the only thing to remember to get it to work in all browsers is to float both your list item and your links.
guillaumeb
Written Mar. 17, 2008 / Report /
Thanks a lot for your piece of code, it really helped me. I do appreciate