Hover moves content in IE 7

darn CSS

[txbakers]

I'm baffled by this one. In IE 7, when I hover over an <A href=> nested in a <li> the whole div moves up a little bit, and when I hover somewhere else that div moves down a little.

only does this in IE 7 (not 6) firefox puts it in the right place to begin with.

It looks like IE7 starts the div too low and puts it up.

Odd stuff this CSS.

[SuzyUK]

Odd stuff this CSS.

hehe.. but can I change that to 'Odd stuff = CSS in IE'?

IE7 still has problems with list spacing (whitespace in lists) especially if the nested links have display: block; set on them. Most of the 'named' bugs were fixed but the cause of them (hasLayout) wasn't, so now and again IE7 is starting to throw up errors with lists that are similar to IE5!

anyway enough rambling.. if you have the link set to display: block; and it has a background change on hover - ensure it and/or the <li> has hasLayout triggered to "true" (set an explicit width/height or test using zoom: 1;}

If this doesn't make sense and I'm misunderstanding, can you post the css for the <ul>, <li> and link please

[txbakers]

I actually understand parts of that!

But when I looked up "hasLayout" I was baffled again. I take it it's not a CSS property somewhere.

Here is the CSS:

#footer-content ul.columns li a {
display: block;
line-height: 2em;
font-weight: normal;
padding-left: 5px;
width: 98%;
color: #BDBDBD;
}

THANKS!

[edited by: DrDoc at 6:28 am (utc) on July 24, 2007]

[Marshall]

txbakers,

This may seem a dumb question, but why do you have two footer wrapers? if I'm reading your HTML correctly. It is possible that IE7 is putting a line between <div id="footer"> and <div id="footer-content"> even though there is no content (your line-height:2em). Maybe try eliminating the outer wraper. Just a thought.

Marshall

[SuzyUK]

Oh for goodness sake IE!

txbakers, it is hasLayout but not related to lists as was my original assumption, sorry - the trigger and the correction are still the background color changes on hover, as is often the case with hasLayout errors (all versions of IE) - but changing designs to not use them is not an option (in my book anyway) we should be allowed to use CSS in it's simplest form to change colors!

for the benefit of others reading this here is summary code produced from your template which recreates the problem in IE7, Marshall, the double wrapper is because outer is 100% wide (darker background) while inner is 810px wide and centered. though I have removed centering, coloring etc while stripping the code to basics

CSS:
* {margin: 0; padding: 0;}

#content, #footer-content {width: 810px;}

#content-wrap {
float: left;
width: 100%;
background: #fff;
}

#content {background: #ffc;}

#footer {
clear: both;
padding: 25px 0;
background: #eee;
}

#sidebar ul.sidemenu a {}
#sidebar ul.sidemenu a:hover {background: #fff;}

#footer ul.columns li a {}
#footer ul.columns li a:hover {background: #202020;}

HTML:
<div id="content-wrap">
<div id="content">
<div id="sidebar">
<ul class="sidemenu">
<li><a href="#">Region 2 - 9/15/2007</a></li>
</ul>
</div>
</div>
</div>

<div id="footer">
<div id="footer-content">
<ul class="columns">
<li><a href="#"><strong>CHARMS</strong> - Web-Based Management for Successful Programs</a></li>
</ul>
</div>
</div>

IE CAN'T COUNT!

it's the footer div itself which needs layout triggered, it seems it can't cope with clearance and counting the padding value, I've never really seen layout problems when only vertical padding is involved, I presume it's the presence of clear too or perhaps it's the fact that it contains an element which already has 'Layout' (the footer-content div has a width) but either way the whole scenario should be OK and it's not - so with your template adding width: 100%; to the footer to give it "layout" too should be the most stable fix..

[txbakers]

and that fixed it!