IE7 :hover problem

Hi

I’ve got a small IE7 problem in a site I’ve just designed. Hovering over any menu item seems to break floats elsewhere on the page. This doesn’t happen in IE6.

I’ve searched quite extensively for fixes. The only thing I’ve found which seems to relate to this problem is an article from 2006 advising to change the DOCTYPE to HTML 4.01 Strict. I currently have it set at XHTML 1.0 Transitional. I’m quite new to HTML and am a bit wary of doing this.

Any thoughts would be great.

Thanks

PS I’m new to this forum. I apologise if I’ve not adhered to any of the guidelines.

Just to give a bit more detail on this, if I click on the active link, the floated item goes back to its proper position.

Welcome to Sitepoint, qwaerstd. :slight_smile:

I can’t think of anything that could help with the information given as I don’t think I’ve ever encountered that problem. Perhaps if you could provide a url to the site…or post the html and css in this thread, it might be easier to pinpoint the problem and offer advise.

note: members with less than 5 posts can’t post links, so if you decide to post a url, try typing it without the http:// …or separate elements out (http:// www . mysite . com) so it’s not recognized as a link.

If you want send us a private message with the link and when I get the chance later I will take a look to see what is going on.

Thanks guys.

Here’s the HTML for the menu:

<div id=“nav”>
<ul>
<li><a href=“index.html” class=“current”>Home</a></li>
<li><a href=“remedial.html”>Remedial</a></li>
<li><a href=“eft.html”>EFT</a></li>
<li><a href=“findMe.html”>Find Me</a></li>
</ul>
<!–End of #nav–></div>

Here’s the CSS:

#nav {
clear:both;
border-top: 1px solid #333;
border-bottom: 2px solid #333;
margin-right: 20px;
margin-left: 20px;
}

#nav ul {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
overflow:hidden;
zoom:1;

}

#nav ul li a {
float: left;
display:inline;
}

#nav ul li a:link,#nav ul li a:visited {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
line-height:170%;
text-decoration:none;
color:#333;
}

#nav ul li a:hover {
background: #ccc;

}

#nav ul li a.current,#nav ul li a.current:hover,#nav ul li a.current:active, #nav ul li a.current:visited {
color: #fff;
background: #666;
cursor:default;
}

There’s a floated picture in the main content which moves (as if the float wasn’t there) when a menu item is hovered over. The CSS is this:

#mainContent {
position: relative;
margin: 30px 30px 0px;
}

#pic {
border: 1px solid #333;
float:right;
display:inline;
margin-bottom:30px;
margin-left: 30px;
}

Cheers

I think this is your problem… Try adding the float attribute to the nav class and using the display: inline attribute just on #nav li. That selector is selecting the <a> tag of the #nav ul li only.

Thanks for the suggestion, I tried this, but it didn’t get rid of the problem, and I experienced margin collapse in the next div down (#mainContent). This was my code:

#nav {
clear:both;
border-top: 1px solid #333;
border-bottom: 2px solid #333;
margin-right: 20px;
margin-left: 20px;
float: left;
}

#nav ul {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
overflow:hidden;
zoom:1;

}

#nav li {

display:inline;

}

Could you send me a link possibly so I can see exactly for myself what it is doing?

I just got done looking at your site in IE7 and I’m not getting those results to happen. Are you sure you are in IE7 and not IE8? Everything was working well. The only thing I noticed is that the image on the home page doesn’t have any sort of padding or margin to its left in IE.

Definitely in IE7 - when I first go on the page everything looks ok, but if I hover over the home button whilst on the home page, the picture moves to the left as if the float wasn’t there. It’s the same with every page. Weird!

I may know what this is. Is this the staircase bug?

Whenever I make a menu with floated anchors, I also mention a state for the li’s.

It doesn’t change anything, except that IE is suddenly happy.

BTW I dunno what you’re using the wrapping div for, so I’m doing your code as if we just had <ul id=“nav”>


#nav {
clear:both;
margin: 0 20px;
padding: 0px;
list-style: none;
border: solid #333;
border-thickness: 1px 0 2px 0;
overflow:hidden; /*encloses floats everyone but IE6*/
}
* html #nav {height: 1%; overflow: visible;} /*float enclosement IE6*/

[b]#nav li {
  display: inline; /*setting a state for the li... I'm not sure if this was the reason agarcia recommended to do this, but it's a good idea anyway!*/
}[/b]

#nav li a {
float: left;
display:inline; ,-- only needed if there are side margins on these anchors*/
padding: 0 10px;
color:#333;
line-height: 170%;
text-decoration:none;
}

/*don't forget focus!!*/
#nav [b]a:focus[/b], #nav a:hover {
background-color: #ccc;
}

#nav li a.current {
color: #fff;
background: #666;
cursor:default; /*clever!*/
}

If the problem’s not the staircase bug then I’ll betcha it will go away with this:


#mainContent {
[b]clear: both;[/b]
position: relative;
margin: 30px 30px 0px;
[b]set haslayout... [/b]
}
/*where haslayout can be a width, or setting overflow to something other than visible, or something for IE... */

You did have zoom:1 on the menu and while that could do it as well, I took it out only because often within the constraints of the design, you can trigger haslayout in a “legal” way… but if you don’t care about a validation error (it’s only an error because the validator doesn’t recognise proprietary stuff, so it’s safe to use) then zoom: 1 on #mainContent may work fine.

So I’m thinking either staircase bug OR the mainContent not having layout and not actually clearing the floats (even though the floats should be enclosed by the menu anyway but this is IE we’re talking about).

I’ve searched quite extensively for fixes. The only thing I’ve found which seems to relate to this problem is an article from 2006 advising to change the DOCTYPE to HTML 4.01 Strict. I currently have it set at XHTML 1.0 Transitional. I’m quite new to HTML and am a bit wary of doing this.

There really should be no difference between the two, except that Strict is a bazillion times more awesome than Transitional in either doctype.

There’s no real good reason to use XHTML anything in your case but you can keep it if you like the /> on stuff. IE shouldn’t change behaviour between an XHTML doctype and an HTML4 doctype, so long as they are both properly written (not creating Quirks Mode).
Transitional doctypes (of either kind) have the disadvantage of letting you use bad (deprecated) code without the validator slapping your wrist with a stick like the nuns used to do. : )

Sorry:
About the staircase bug, which looking again at your posts doesn’t quite sound like your problem, but anything that makes IE more stable without affecting other browsers is good.

Haslayout in general because you will run into it everywhere, so good to know about it. It’s often the first blind fix a developer may throw on a weird IE problem (not IE8, who does not haz haslayout unless it’s in compatability mode).

Wow thanks, that’s a pretty extensive reply. I’ll have a go and let you know if it worked.

The extra wrapping div was because I wanted to create a double border with one thick line and one thick line. I’m quite inexperienced - will those nuns be after me?!

The extra wrapping div was because I wanted to create a double border with one thick line and one thick line. I’m quite inexperienced - will those nuns be after me?!

I saw borders of different thicknesses but if you werre trying to get something like the result of border-style: ridge but with two different
thicknesses
colours
or whatever

then the wrapping div is fine. Also if you need a background image/colour that needs to be wider than the actual ul itself.

But at the time it looked like you just had a box around the ul with a border above and one below of different thicknesses: if the ul can do that then remove the div, simply because as they say, the more code there is, the more there is to break (and the harder it is for you and anyone else to read it, unnecessarily). People often forget that a ul is a block like a div is a block, and you can generally do the same stuff to it.

If the plan was that the ul would later also hold a border, then yeah, you need the wrapping div as a “styling hook”.

Actually it’s not nuns but jack-booted storm troopers from the Web Standards Evangelical Army. The strict nuns work for the W3 Validator.

Oh and did I mention they are also ninjas?

*edit BTW a ninja just poked his head up from behind me and gave me a jab with his bo: I have border-thickness in my code above.
I’m not sure what drug I was on (retardine?), but the correct property is
border-width

lawlz.

Poes, I was going to mock you mercilessly for your new CSS element, but you fixed it first. Curses! :rofl:

Surprised that ninjas are faster than you, Max?

Triggering haslayout in #mainContent solved it.

#mainContent {
position: relative;
margin: 30px 30px 0px;
overflow:hidden;
}

Thanks so much for your help

Great to hear.

If IE6 is an issue, know that overflow doesn’t make hazlayout for IE6 (but does for IE7 as you saw).

If you also need it for IE6, have this


#mainContent {
position: relative;
margin: 30px 30px 0px;
overflow:hidden;
}
[b]* html #mainContent {height: 1%; overflow: visible;}[/b]

If the content inside really is higher than 1% (which is will be), another IE6 bug will kick in and let the content increase the height (Expanding Box Bug) and just in case overflow: hidden screwed with that, I added overflow: visible… though I don’t usually do that. You could even look and see if IE6 needs the overflow hidden undone like that.