...

View Full Version : IE7 a:hover issue



dublin6
05-25-2009, 04:26 PM
Hi,
I have searched forever and can not find a fix this problem. I have a menu that works in all browsers except IE7. It seems to be the standard IE7 hover problem but the forums say that IE7 fixed this and now a:hover should work given that you have the right doctype. This is my DOCTYPE declaration:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Here is the CSS for the menu:

#mainContent_menu ul{
list-style-type: none;
padding: 0;
margin: 0;
}
#mainContent_menu li a{
text-decoration:none;
display:block;
color:#FFFFFF;
width: 145px;
height: 1%;
}
#mainContent_menu li a:hover{
background-color: #76B2e6;
color: #FFFFFF;
}

body#homepage ul li#home a, body#brandpage ul.none li#brands a, body#hellopage ul.none li#hello a, body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
background: #76B2e6;
color: #FFF;
}


and here is the HTML:

<body id="homepage">
<div id="mainContent_menu"><ul>
<li id="home"><a href="OurSpace.html">01. our space</a></li>
<li id="brands"><a href="InspiringBrands.html">02. inspiring brands</a></li>
<li id="hello"><a href="SayHello.html">03. say hello</a></li>
<li id="new"><a href="NewAtBlu.html">04. new at blu</a></li>
<li id="plug"><a href="PlugInto.html">05. plug into</a></li>
</ul>
</div></body>

It is really just a simple menu that when you rollover a item the background goes blue, and stays blue for whatever page you are on. It works in IE6, FF, Opera, Safari, and Chrome but does nothing in IE7. Any help or suggestions would be greatly appreciated!

abduraooft
05-25-2009, 04:32 PM
Have try with the following,

#mainContent_menu li a{
text-decoration:none;
display:block;
width: 145px;
height: 1%;
}
#mainContent_menu li a:link,#mainContent_menu li a:visited{
background-color: #76B2e6;
color:#FFFFFF;
}
#mainContent_menu li a:hover,#mainContent_menu li a:active{
background-color: #76B2e6;
color: #FFFFFF;
}
IE needs these pseudos in the Link,Visited, Hover, Active (LoVe-HAte) order, see http://www.w3schools.com/CSS/css_pseudo_classes.asp

dublin6
05-25-2009, 04:45 PM
Thanks, that was fast, but it didn't work. I changed it to the following, only omitting one line of your code because it made it so that the blue was always there irrelevant of if the item was hovered over or not.


#mainContent_menu li a{
text-decoration:none;
display:block;
color:#FFFFFF;
width: 145px;
height: 1%;
}

#mainContent_menu li a:link,#mainContent_menu li a:visited{
color:#FFFFFF;
}
#mainContent_menu li a:hover,#mainContent_menu li a:active{
background-color: #76B2e6;
color: #FFFFFF;
}

body#homepage ul li#home a, body#brandpage ul.none li#brands a, body#hellopage ul.none li#hello a, body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
background: #76B2e6;
color: #FFF;
}

I still get the same results - nothing in IE7. Any other suggestions?

abduraooft
05-25-2009, 05:06 PM
It is really just a simple menu that when you rollover a item the background goes blue, and stays blue for whatever page you are on.


body#homepage ul li#home a,
body#brandpage ul.none li#brands a,
body#hellopage ul.none li#hello a,
body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
Any clues?

(Your above css won't work in FF or any other browsers, for that particular requirement)

PS: Make use of firebug (http://getfirebug.com), to inspect your element's style on run

dublin6
05-25-2009, 05:19 PM
Sorry, I forgot to delete the .none, you are right that it would not have worked with that still in there for the other pages but right now I am just looking at the home page, trying to get hover to work. I haven't even developed the other pages yet, just working on getting my template to work in all browsers first. Also, I do use firebug, and load of other FF addons to help with debugging but my problem is only in IE7.

Any more suggestions?

dublin6
05-25-2009, 07:10 PM
sorry, fixed second problem, now just the same old hover/active problem in IE7...

dublin6
05-25-2009, 11:21 PM
No clue why this worked but I fixed it by turning it into a template and applying it to a new page.

Now the problem in IE(6,7and8) is that in the new page the menu is shifted to the bottom of the page. Any idea why this would happen? If it would be benificial for me to post all of the code I can do.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum