Forum Moderators: not2easy
CSS:
[2]
.invisible {display:none}
a#navimg1 {display:block; width:176px; height:40px; background-image:url(*my mouse up img*);
margin:0px 10px 20px 10px;
background-repeat:no-repeat; text-decoration:none; border:none;
background-color:#604028;
}
a#navimg1:hover {background-image:url(*my mouse over img*);
background-repeat:no-repeat;
text-decoration:none; border:none;
background-color:#604028;}
[/2]
HTML:
[2]
<a href="#" id="navimg1"><span class="invisible">Link 1</span></a>
<a href="#" id="navimg2"><span class="invisible">Link 2</span></a>
<a href="#" id="navimg3"><span class="invisible">Link 3</span></a>
(...and so on...)
[/2]
I have navimg1 through 7 using the same bit of code. If you hover over navimg1 and navimg2 in IE 6 they're fine, but once you mousover navimg3 the trouble begins. Navimg3 actually forces navimg2 to shift upwards 20px until you hover over navimg2 again, then it shifts itself back down. Navimg1 and 7 will keep their margins in place, but 2 through 6 will shift up and down like an accordion.
I have tried making them stick with position:relative on a :link and :visited (using IE conditionals to add an extra stylesheet) but so far nothing I try makes the images stick in place in IE 6.
Anyone have an idea?
[edited by: Cher at 4:14 pm (utc) on Feb. 1, 2007]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
/* <![CDATA[ */
a#navimg1 {display:block; width:176px; height:40px; background-image:url(images/banner.gif);
margin:0px 10px 20px 10px;
background-repeat:no-repeat; text-decoration:none; border:none;
background-color:#604028;
}
a#navimg2 {display:block; width:176px; height:40px; background-image:url(images/banner.gif);
margin:0px 10px 20px 10px;
background-repeat:no-repeat; text-decoration:none; border:none;
background-color:#604028;
}
a#navimg3 {display:block; width:176px; height:40px; background-image:url(images/banner.gif);
margin:0px 10px 20px 10px;
background-repeat:no-repeat; text-decoration:none; border:none;
background-color:#604028;
}
a#navimg1:hover {background-image:url(images/banner_mouseover.gif);
background-repeat:no-repeat;
text-decoration:none; border:none;
background-color:#604028;}
a#navimg2:hover {background-image:url(images/banner_mouseover.gif);
background-repeat:no-repeat;
text-decoration:none; border:none;
background-color:#604028;}
a#navimg3:hover {background-image:url(images/banner_mouseover.gif);
background-repeat:no-repeat;
text-decoration:none; border:none;
background-color:#604028;}
/* ]]> */
</style></head>
<body>
<div>
<a href="#" id="navimg1"><span class="invisible">Link 1</span></a>
<a href="#" id="navimg2"><span class="invisible">Link 2</span></a>
<a href="#" id="navimg3"><span class="invisible">Link 3</span></a>
</div>
</body>
</html>
(normal - firefox and ie7)
+-----+
¦ img
+-----+
+-----+
¦ img
+-----+
(when mouseover'd in ie 6)
+-----+
¦ img
+-----+
+-----+
¦ img
+-----+
I copy/paste your strict doctype but it unfortunately didn't change anything.
If you start from the top at navimg1 and move your cursor down the navigation menu, all 7 image bunch together as though there were no bottom margins. If you reverse direction (start from 7 and mouse up to 1), the images reset and they all have their proper margins again.
It's kind of fun to run the mouse cursor up and down and watch the navigation area shrink and e-x-p-a-nd, but that's not what I'm intending to do :D
[2]
a:link, a:visited {font-family:verdana, helvetica, sans-serif;
color:#006633; background-color:#FFF7E5;
text-decoration:none; border-bottom:none;
padding:0px 2px 0px 2px;}
a:hover {font-family:verdana, helvetica, sans-serif;
border-bottom:1px dashed #666699;
text-decoration:none; padding:0px 2px 0px 2px;
color:#333366; background-color:#F0E8D8;}
[/2]
I tried just removing the padding: and leaving everything else in, but that just caused the accordian-effect to come back in IE. I had to completely remove that code to get the navimgX to stop shifting.
Good hunting.
If the browser will accept it, I send application/xhtml+xml
Makes the browser throw a fit if there is even a teeny thing wrong with the page.
Damn good discipline. I write pretty solid code, and I can usually fix issues in minutes, as the validator acts as a debugger for me.
