[Solved] Nav Menu double-spaced??? In I.E. 8

[takeiteasy04]

Ok, the css validated fine. When going from FF to IE 7, I had to simply remove the float from the <ul> containing the menu, and it worked fine. In IE 8 however, the menu renders as if there are blank <li>’s between each menu item. I’ve tried removing the float for this too, but all that does is shift the entire menu (extra spaces and all) over to the left.

Any help would be MUCH appreciated.

Here’s the address: http://mosonline.dnsalias.net/index.php

Here’s the mark-up for the Menu:

Code:

• Home
• Products
• Support
• Training
• Partners
• Contact
• FAQ

And here’s the CSS (Based on what worked in FF)

Code:

div#side-menu {
width: 164px;
font-size: 1.5em;
position: fixed;
text-align: right;
}

div#side-menu ul#side-nav {
list-style: none;
height: 200px;
float: right;
display: block;
}

div#side-menu ul#side-nav li{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 137px;
display: block;
margin-top: 3px;
height: 19px;
line-height: 19px;
position: relative;
right: 2px;
padding-top: 1px;
text-align: right;
color: #003663;
}
div#side-menu ul#side-nav li:hover {
background-image: url(images/menu-link-hover.jpg);
background-position: top right;
background-repeat: no-repeat;
width: 137px;
color: #fff;
}

div#side-menu ul#side-nav li a.nav-link {
position: relative;
display: block;
text-align: right;
color: #003663;
right: 10px;
height: 19px;
width: 137px;
}

div#side-menu ul#side-nav li a.nav-link:hover{
color: white;
width: 137px
}

[takeiteasy04]

"apostrophe" wrote:

Try validating your markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmosonline.dnsalias.net%2Findex.php

Thanks! This will be an "every-site" requirement now!

[Author]

Posts