IE CSS Hover Issue

[rustyarmour]

Hi All,

I have inherited a wordpress site that had a multitude of style issues. I have an unresolved issue and of course, it's an IE css nav issue.

The nav is set up to show white text on a blue background as default. If the item is active, white text on a darker blue/gray background. There are 2 issues.

1) If an item has no subnav and it is hovered, the white text totally disappears.

2) If the item has subnav, and you hover it, the subnav shows, but the white text for the main nav item disappears UNTIL you rollover the subnav and back up to the heading....then it reappears with the active darker blue/gray background.

here is the code... Any ideas? Thanks for your time.:

#nav .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 643px;
}

#nav .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}

#nav .menu-header li,
div.menu li {
float: left;
position: relative;
}

#nav a {
color: #fff;
display: block;
line-height: 25px;
padding: 0 10px;
text-decoration: none;
}

#nav ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 25px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

#nav ul ul li {
min-width: 180px;
}

#nav ul ul ul {
left: 100%;
top: 0;
}

#nav ul ul a {
background: #0E79BE;
color: #FFFFFF;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
border-bottom: 1px solid #D5D5D5;
border-left: 1px solid #D5D5D5;
border-right: 1px solid #D5D5D5;
}

#nav li:hover > a {
background: #486891;
color: #FFFFFF;
margin: 0;
}

#nav li.menu-item a:hover {
margin: 0;
background-color:#FFFFFF;
color: #0E79BE;
}

#nav ul li:hover > ul {
display: block;
}

#nav ul li.current_page_item > a {
background: #486891;
color: #FFF;
margin: 0;
}

#nav ul li.current-menu-ancestor > a {
background: #486891;
color: #FFF;
margin: 0;
}

#nav ul li.current-menu-item > a {
background: #486891;
color: #FFF;
margin: 0;
}

#nav ul li.current-menu-parent > a {
color: #333;
background-color:#E3E3E3;
margin: 0;
}

#nav ul li.current-menu-parent > a:hover {
background: #486891;
color: #FFF;
margin: 0;
}

[SuzyUK]

try adding

#nav li {position: relative;}

does that help? IE likes a <li> rule before it can deal with an li:hover rule..

Your code:

#nav li:hover > a {
background: #486891;
color: #FFFFFF;
margin: 0;
}

doesn't seem to have a corresponding #nav li {} rule, although I see there are some more specific ones earlier in the css..

#nav .menu-header li,
div.menu li {
float: left;
position: relative;
}

I don't know if they're in the same tree as the links that are giving you bother, only the HTML nesting structure will confirm that, if the first bit of code doesn't help, please post the stripped HTML (i.e. no actual links required.. just all the div's ul's and li's, classes and ID's involved).. it could be a hasLayout issue and again we would need to see the structure

[rustyarmour]

Hi SuzyUK,

Thanks so much for such a quick response. I added the code you suggested with no results. Unfortunately, this is all built on revised php templates, so I am not quite sure what I could possibly send you other than the calls to the various files.

I think this might just be a case of add/subtract possible coding solutions until I find one that works. We seem to be ok in Firefox, Safari, and even Chrome on PC and Mac.

[webprutser]

If you could post the html ... I'd like to try.

[SuzyUK]

so I am not quite sure what I could possibly send you

No php required.. just the HTML - view the source of the page, and copy the div with the ID of nav.. and all it's contents then if you can strip that HTML to it's bare minimum just the opening and closing tags with a hash # fora actual content

also can you tell us which version of IE has the issue?

thanks!

[rustyarmour]

Sorry SuzyUK,

Got sidetracked and had to put out another fire. Hang tight. I'll grab what you need.

Today, I am definately "rusty"...lol

[rustyarmour]

Here is the code. The issues seems to be IE7, which also happens to be the browser the owner is using to test ~ failed upgrade to 8 kept crashing his system, but that is another issue entirely. I also have the same issue when viewing in 7.

<div id="nav">
<div class="menu-header">
<ul id="menu-main-menu" class="menu">
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a>
<ul class="sub-menu">
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
</ul>
</li>
<li id="#" class="#"><a href="#">#</a>
<ul class="sub-menu">
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
</ul>
</li>
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a>
<ul class="sub-menu">
<li id="#" class="#"><a href="#">#</a></li>
<li id="#" class="#"><a href="#">#</a></li>
</ul>
</li>
<li id="#" class="#"><a href="#">#</a></li>
</ul></div></div>

[SuzyUK]

Hiya Rusty (by name and nature apparently ;))

thanks so much.. unfortunately that code is not reproducing the error for me in IE7 (not surprising if it does indeed turn out to be a hasLayout issue).. I think I'd need the ID and class names for the <li>'s too and if there is actually ID's in there are you sure there is no CSS for those ID's

actually I probably need to see the situ of the menu too, so if you want to, you can send me the page link by PM.. & I'll summarise the solution here.. because never fear, there will be one ;)

Suzy

[webprutser]

Complete blank screen with all the #

[rustyarmour]

heyya guys....

lol....you are so right about rusty by nature. It's been one of those worked all week yesterday kind of schedules. Yes, there is a lot of class linking for all the wordpress stuff. SuzyUK...thanks for the offer. I will PM you with the page. I think too, a good night sleep is in order for this rusty yank. :^)

[SuzyUK]

@webprutser.. put a dark background on the body.. it's because the initial text is white, though I can't get the error to reproduce with example above though I'll post the full broken example if you want to see..

@rusty.. never seen the likes! not your code.. it's a lot but it's well sectioned - the "bug" - it's not hasLayout it's something in the reset, that's the first bit at the top of the CSS file.. IE7's not liking

a {margin: 0;}

:o

anyhow to avoid disturbing the reset (never liked them!) as it might have repercussions throughout the site you're not ready for yet.

add

margin: auto

in the following rule:

#nav a { color: #fff; display: block; line-height: 25px; padding: 0 10px; text-decoration: none; margin: auto; }

it fixed it for me.. though I'd fairly much stripped out all the CSS.. typically I left the reset until last of course, I hope it still works in the full page code,let me know

I've no idea why.. as it works fine in the simple reconstruction with code earlier, and also once the

a {margin: 0;}

is added.. I can only break the simple example when I add the full HTML (after me telling you to strip it too!) .. and the a {margin: 0;} rule.. maybe I'll look for the why but I'll leave that 'til tomorrow.. I'll post an example for you to see webprutser even if Rusty's just happy with the fix ;)


anyway time I wasn't here.. Night Night!

[rustyarmour]

Hey SuzyUK!

Totally Awesome. Yes, the fix worked. Of course, that was the one thing I hadn't tried. The boss man is happy, and so am I. I really appreciate the second pair of eyes on this one. Seriously, you should have seen the code 2 days ago. For every fix implemented, it would fix one issue in one browser and break two in another. I was really getting to the point where I couldn't see the forrest for the trees. My hat's (or helmet) is off to you!

My compliments!

Rusty

[SuzyUK]

You're Welcome, my good knight ;) - am glad it worked

I think it's actually a relation of the "IE Pure CSS Popups bug" or some old dusty cobwebs tell me that IE has always had a problem with hovers that try to change the background from transparent to a color on hover

some minimal code which reproduces

a {margin: 0;} /* this was part of the reset */

#nav { background: #0e79bf; /*url(menubg.jpg) repeat-x;*/}
#nav .menu-header {width: 643px; overflow: hidden; /* overflow is for nonIE7 browsers to clear floats just for demo */}
#nav .menu-header ul {list-style: none; margin: 0;}
#nav .menu-header li {float: left; position: relative;}

#nav a { color: #fff; display: block;}
/*#nav a {margin: auto;}*/ /* uncomment to fix */
#nav li a:hover {background-color:#fff; color: #000; margin: 0;}

<div id="nav">
<div class="menu-header">
<ul><li><a href="#">Home</a></li></ul>
</div>
</div>

in the instance above there are other fixes but I think this is the simplest one for not having to adjust lots of other bits of code, not here but on the actual page.. all the margins would be defaulting to zero anyway - so by adding 'auto' it is telling IE7 to change another property on hover not just "color", 'color' on its own is not enough to "wake it up"

the CSS Popups fix is/was to add (mostly) any other default property, which wasn't already declared on the <a>, to the <a>hover.. which also works for this bug too

e.g. adding text-indent to the hover rule would have also fixed it..

#nav li a:hover {background-color:#fff; color: #000; margin: 0; text-indent: 0;}

it might be an idea to use the text-indent style fix, as it stands out a bit more.. and you could comment it as an IE7 bugfix (though does no harm!) to remind you why it's there.. just a thought..

OH and I wouldn't go changing the reset.css just because of this, it's an IE7 bug pure and simple, long time since I saw a real live IE7 bug and I would never have related it to the CSS Popups bug anyway, especially not that late at night ;)

[rustyarmour]

lol...looks like you burn the candes at both ends too. Thanks again, SuzyUK. This forum is amazing! You're right on about the text-indent standing out. I will adjust the code accordingly.