Sent by Mikhail Bozgounov on 22 February 2006 13:01
Just a general question concerning CSS rollovers:
You remember, that in *some cases* IE tries to download a CSS image background
EVERY TIME you mouse over the link! This could happen even in cases when you use
only ONE image for both normal and hover state of the image!
There is a way to resolve this annoying problem, only that... I forgot it :-|
Was it applying the background image to the LI in the list instead to the A, was
it something else, I am not sure already... :(
Here's the best I have come with:
http://lelion.info/web/tuk-tam/ (this is a working draft)
CSS:
http://lelion.info/web/tuk-tam/css/master.css
And the code in question I use for this effect:
HTML:
<div id="topnav2">
<ul>
<li id="a"><a href="#"><span>link 1</span></a></li>
<li id="b"><a href="#"><span>link 2</span></a></li>
<li id="c"><a href="#"><span>link 3</span></a></li>
<li id="d"><a href="#"><span>link 4</span></a></li>
</ul>
<!--/topnav2--></div>
CSS:
#topnav2 ul {
list-style: none;
margin: 0;
padding: 0;
}
#topnav2 li {
margin: 0;
padding: 4px 0 0 4px;
float: left;
}
#topnav2 a {
display: block;
width: 185px;
height: 89px;
}
#topnav2 li#a a {background: url(../i/topnav2-a.jpg) top left;}
#topnav2 li#a a:hover {background: url(../i/topnav2-a.jpg) bottom left;}
#topnav2 li#b a {background: url(../i/topnav2-b.jpg) top left;}
#topnav2 li#b a:hover {background: url(../i/topnav2-b.jpg) bottom left;}
#topnav2 li#c a {background: url(../i/topnav2-c.jpg) top left;}
#topnav2 li#c a:hover {background: url(../i/topnav2-c.jpg) bottom left;}
#topnav2 li#d a {background: url(../i/topnav2-d.jpg) top left;}
#topnav2 li#d a:hover {background: url(../i/topnav2-d.jpg) bottom left;}
Is this code "bulletproof" concerning the issue with IE 6 or I am missing something?
I applied the background image to the LI, and applied float:left to all of the
list items.
Thanks in advance for any tips! :-)))
Michel
PS "no-repeat" removed from the background properties, because I am sure in the
width and height of the links :-)
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
