My horizontal nav appears vertical in IE 7. Here is the link to my test site: Inspired to Design. The nav is at the top (about, web, print, contact).
My nav css:
#nav {
float: left;
margin: -5.15em 0 0 30em;
}
#nav ul {
list-style: none;
position: relative;
}
#nav ul li {
display: block;
float: left;
font-size: 1.2em;
position: relative;
}
#nav ul li a {
display: block;
padding-left: 3em;
}
#nav ul li a:link, #nav ul li a:visited {
color: #C6C;
text-decoration: none;
}
#nav ul li a:hover, #nav ul li a:active, #nav ul li.selected a:link,
#nav ul li.selected a:visited {
color: #6C6;
text-decoration: none;
}
In a separate css style sheet with styles for IE7 only, I coded the following because I read that adding ‘display: inline-block’ and/or assigning a width to floated list items may solve the problem. I tried each style rule separately and then together. I also tried ‘display: inline;’.
#nav ul li {
display: inline-block;
width: 10em;
}
The result of the above code is the second two list items are vertically aligned under the top two list items with a lot of padding to the right of each list item.
I hope this is clear and detailed enough.
