Menu in IE7 not displaying correctly

[ndezigns]

Hey all. I am having the hardest time trying to figure this one out. I have the menu working correctly in Firefox and Safari but its acting up a little in IE7. After a couple of hours of trying to figure this one out I figured I definitely need another eye or two to look it over. I think the problem is minor but then again I don't know. If you go to <> and view it in IE7 and then visit one of the links in the menu you will see what I am talking about. If one of the links have been visited and you hover over it the left part of the image does not display at all. ANY help at all would be so GREATLY APPRECIATED!

here is the code for the menu.

div#logoSlim .navigationSlim {
position: relative;
top: 5px;
left: 75px;
}

div#logoSlim .navigationSlim ul{
list-style:none;
margin:0 auto;
}
div#logoSlim .navigationSlim ul li{
float:left;
list-style:none;
margin-left: 2px;
}
div#logoSlim .navigationSlim ul li a, div#logoSlim .navigationSlim ul li a:visited {
height: 19px;
float:left;
display:block;
color:#fff;
text-decoration:none;
text-transform: uppercase;
font: bold 12px Arial, Helvetica, sans-serif;
background: bottom;
font-weight:bold;
padding:0px 0 10px 11px;
text-align:center;
}
div#logoSlim .navigationSlim li a , div#logoSlim .navigationSlim li a:visited {
float:left;
display:block;
padding: 6px 10px 10px 1px;
}
div#logoSlim .navigationSlim li a span, div#logoSlim .navigationSlim li a:visited span{
float:left;
display:block;
padding: 6px 10px 10px 1px;
}

div#logoSlim .navigationSlim li.current a {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li.current a:visited {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li.current a span {
color:#fff;
background: url(../images/nav_slim_right.gif) no-repeat right 5px;
}
div#logoSlim .navigationSlim li a:visited {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li a:hover {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li a:hover span {
color:#fff;
background: url(../images/nav_slim_right.gif) no-repeat right 5px;
}

HTML:
<div id="logoSlim">
<div class="navigationSlim">
<ul>
<li class="current"><a href="#"><span>dashboard</span></a></li>
<li><a href="#"><span>blogs</span></a></li>
<li><a href="#"><span>forums</span></a></li>
<li><a href="#"><span>groups</span></a></li>
<li><a href="#"><span>events</span></a></li>
</ul>
</div>
</div>

[edited by: SuzyUK at 7:37 am (utc) on Sep. 1, 2008]
[edit reason] No links please, HTML code added... [/edit]

[SuzyUK]

Hello ndezigns and Welcome to WebmasterWorld! [webmasterworld.com]

you have a specificity problem.. and there's a few rules that are duplicated. and btw I saw the same problem in Firefox and IE when I tested and I would imagine safari etc would be the same as it is a specificity conflict

the first, in cascade, lot of selectors for the links are:

div#logoSlim .navigationSlim [b]ul[/b] li a,
div#logoSlim .navigationSlim [b]ul[/b] li a:visited

the later in cascade selector uses this:

div#logoSlim .navigationSlim li a:visited

the ul in the first selector makes it heavier weighted, higher specificity, more important whatever..

in the first rule you have background: bottom; that little blighter is overruling your later background rule where you're trying to add the image - because it's selector construction is more specific

as far as I can see that background: bottom; is not necessary so simply removing it should solve your described issue.. however the other thing I see is a lot of unnecessary code which is simply adding to the complication and why you possibly found it hard to spot the conflict

IMHO there is no need to repeat the visited rules at all; if you want the visited links to have the same properties as normal links then just leave visited selectors out and let the more generic a selector take care of all link states for you

also in regards to the specificity issue mentioned above, you have an entirely redundant ruleset

div#logoSlim .navigationSlim ul li a, 
div#logoSlim .navigationSlim ul li a:visited {
float:left;
display:block;
...
padding:0px 0 10px 11px; 
}

entirely overrules:

div#logoSlim .navigationSlim li a , 
div#logoSlim .navigationSlim li a:visited {
float:left;
display:block;
padding: 6px 10px 10px 1px; 
}

again because of that more specific selector!

.. also you don't need display block set on a floated element because a float is automatically a block

..aside there is a wee IE bug in my test too whereby the whole list (.navigationSlim) is moving slightly to the left on the first hover.. this is being caused by IE's struggle with

position: relative;

div#logoSlim .navigationSlim {
position: relative;
top: 5px;
left: 75px;
}

if you are also seeing this then you could change the rule above so it doesn't use relative position and simply use margins to get the required space instead;

div#logoSlim .navigationSlim {
margin: 5px 0 0 75px;
}

It might be that you're not seeing this as some of this element parents may have position:relative; and/or hasLayout which could counter balance the effect - but I thought I'd mention it just in case ;)

Just a few little things really but anyway here's what I landed up with after a spring clean, and changing all the selectors so they all follow the same format (makes specificity less of a problem)

#logoSlim .navigationSlim {
margin: 5px 0 0 75px;
}

#logoSlim .navigationSlim ul{
list-style:none;
margin:0 auto;
padding: 0;
}

#logoSlim .navigationSlim ul li{
float:left;
margin-left: 2px;
}

#logoSlim .navigationSlim ul li a {
height: 19px;
float:left;
color:#fff;
text-decoration:none;
text-transform: uppercase;
font: bold 12px Arial, Helvetica, sans-serif;
padding:0px 0 10px 11px;
text-align:center;
}

#logoSlim .navigationSlim ul li a span {
float:left;
padding: 6px 10px 10px 1px;
height: 19px;
}

#logoSlim .navigationSlim ul li a:hover,
#logoSlim .navigationSlim ul li.current a {
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
cursor: pointer;
}

#logoSlim .navigationSlim ul li a:hover span,
#logoSlim .navigationSlim ul li.current a span {
background: url(../images/nav_slim_right.gif) no-repeat right 5px;
}

hth