PDA

View Full Version : IE7 a:hover issue


dublin6
May 25th, 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
May 25th, 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
May 25th, 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
May 25th, 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
May 25th, 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
May 25th, 2009, 07:10 PM
sorry, fixed second problem, now just the same old hover/active problem in IE7...
dublin6
May 25th, 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.