Hi list, Trying to do something new today, playing with css, and change a background position of a image on hover.
I've added the following code: #menu div a{ height:32px; width:180px; display:block; } #menu #home a{ background:#f4a707 url('../images/menu/home_01.gif')0 0 no-repeat; } #menu #projetos a{ background:#f4a707 url('../images/menu/projetos_02.gif')0 0 no-repeat; } #menu #eventos a{ background:#f4a707 url('../images/menu/eventos_03.gif')0 0 no-repeat; } #menu #noticias a{ background:#f4a707 url('../images/menu/noticias_04.gif')0 0 no-repeat; } #menu div a:hover{ background-position:0 -32px; } but this don't work, the background-position don't change, but if I change the menu div a rule to: #menu div a:hover{ border:5px solid red; background-position:0 -32px; } the border appear around the element, but again it don't change the background position, and if I do this: #menu #home a:hover{ background-position:0 -32px; } it works as it should, Is there any reason for this ? I wanted to save some kb using a generic :hover ( the menu contains 10 items ), the xhtml for it is simple: <div id="menu"> <div id="header"><img src="images/menu/header.gif" width="180" height="28" alt="" /></div> <div id="home"><a href="index.html"></a></div> <div id="projetos"><a href="/projetos"></a></div> <div id="eventos"><a href="/cadastro"></a></div> <div id="noticias"><a href="/noticias"></a></div> </div> I really want to know the cause of the the generic rule don't working on changing the background-position, but accepting the border rule ( and possible others ). TIA ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/