9 replies [Last post]
AdamBrill
AdamBrill's picture
Offline
newbie
WI, USA
Last seen: 15 years 41 weeks ago
WI, USA
Joined: 2003-12-31
Posts: 3
Points: 0

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>

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 15 years 43 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

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.

PAUL - SkyRocket Design Co
web design sydney northern beaches

AdamBrill
AdamBrill's picture
Offline
newbie
WI, USA
Last seen: 15 years 41 weeks ago
WI, USA
Joined: 2003-12-31
Posts: 3
Points: 0

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.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 15 years 43 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

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?

PAUL - SkyRocket Design Co
web design sydney northern beaches

AdamBrill
AdamBrill's picture
Offline
newbie
WI, USA
Last seen: 15 years 41 weeks ago
WI, USA
Joined: 2003-12-31
Posts: 3
Points: 0

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.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 15 years 43 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

a:hover problem in IE

yes but he didn't mention which version of IE he was using

PAUL - SkyRocket Design Co
web design sydney northern beaches

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

css_seth
Offline
Regular
minneapolis, mn
Last seen: 15 years 41 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

a:hover problem in IE

it is my understanding that IE only gets the box model right under the XHTML-Strict DTD