Wed, 2003-12-31 01:20
I am creating a menu for a PHP script that I am creating, but I have run across a problem with a:hover in IE. Everything looks fine when you first load the page, but as soon as your rollover the links in IE, the space under the links becomes one pixil bigger. I have come across this problem before, but have never been able to fix it. If anyone can point out what is wrong(or how to fix the problem), I would greatly appreciate it.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
#nav {
background-color:#226666;
color:black;
padding:1px;
width:695px;
height:23px;
margin:auto;
}
#nav ul {
display: inline;
text-align: center;
list-style-type: none;
}
#nav ul li {
display: block;
float: left;
margin-right: 5px;
}
#nav ul li#last{
margin-right: 0;
}
#nav ul li a {
color: #000;
background: #90AEAE;
height:23px;
width: 135px;
text-decoration: none;
text-align: center;
display: block;
}
#nav ul li a:hover {
background: #719393;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="index.php" id="one">Home</a></li>
<li><a href="createprofile.php" id="two">Create Profile</a></li>
<li><a href="editprofile.php" id="three">Edit Profile</a></li>
<li><a href="login.php" id="four">Login</a></li>
<li id="last"><a href="changepassword.php" id="five">Password</a></li>
</ul>
</div>
</body>
</html> 
Wed, 2003-12-31 01:49
#1
a:hover problem in IE
It could be something to do with some browsers adding a default margin/padding to the ul or li element? Try adding margin-bottom: 0; for starters. Does your nav have to be in the form of an unordered list? You could try coding it without the ul and li and just go with the a tag instead and you may find that gets rid of your problem.
Wed, 2003-12-31 03:25
#2
a:hover problem in IE
I had already tried margin-bottom:0; and it didn't work. I also realize that I could create the same effect with div and a elements, but I would prefer to keep the unordered list for compatability issues(that way without styles it is just an unordered list). Any other ideas/solutions would be appreciated.
Wed, 2003-12-31 08:26
#3
a:hover problem in IE
The problem is your height of you nav. For some reason can not see why it expands 1px on hover
I change height from 23px to 24px and it went away -
#nav {
background-color:#226666;
color:black;
padding:1px;
width:695px;
height:24px;
margin:auto;
}
Maybe not the best answer but now you can see where it is going wrong and devise a way around it.
Regards
Day
Wed, 2003-12-31 12:43
#4
a:hover problem in IE
Looking at it again the culprit surely has to be the padding: 1px; line?? Anytime I see padding and IE mentioned it undoubtedly is something to do with the incorrect interpretation of the box model in that browser. Do you get the same effect in a recent Mozilla browser? Have you tried removing the padding: 1px; line and tested to see if the problem disappears?
Wed, 2003-12-31 13:00
#5
a:hover problem in IE
As you have suggested, it was a problem with the padding, as when I removed the padding and set the border instead, it worked fine. I also have been testing it in FireBird and it has worked properly the whole time, thus why I knew it was an IE problem. Thank you very much for your help.
Fri, 2004-01-02 00:01
#6
a:hover problem in IE
interesting as IE6 is not supposed to have a problem with the box model, unless rendering in quirky mode, yet your Doc Type looks ok. - Maybe worth running it through the validator to see if it picks up anything.
Regards
Day
Sat, 2004-01-03 12:18
#7
a:hover problem in IE
yes but he didn't mention which version of IE he was using
Sat, 2004-01-03 13:54
#8
a:hover problem in IE
skyrocket wrote:
yes but he didn't mention which version of IE he was using
I was using IE6 to look at it and it had the problem.
1) Also the css on hover only had a background colour change no changes to padding at all.
2) the 1px Padding was part of the container that contained the links therefore should not be affected by hover anyway as IE only supports hover on the 'a' tag
so if hover was a background colour change of the <a> link (no borders or padding) why did the containing div grow in 1px height? Maybe it rendered correctly in the first place and then broke down later.
Oh well fixed now, and that is the main thing.
Regards
Day
Tue, 2004-01-06 16:56
#9
a:hover problem in IE
it is my understanding that IE only gets the box model right under the XHTML-Strict DTD