Hi Rafael, Thanks man, that did the trick!
I've read like last week about specificity, but I thought was not the ase here because I could change other properties ( since they where not specified on the first rule ). CSS can get tricky sometimes! thanks again Marcelo On 11/13/06, Rafael Holt <[EMAIL PROTECTED]> wrote: > > On 14/11/06, Marcelo Wolfgang <[EMAIL PROTECTED]> wrote: > > Hi list, > > > > > > #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: > > Hi, > > I'm pretty certain this is a specificity problem. You see, > > #menu #eventos a {} > > is much more specific than > > #menu div a:hover {} > > So even if you place the second one after the first one, it won't override > it because the first one is more specific. The first one has a specificity > of 210 and the second one is 103 (id is 100, html selector is 1, :hover > pseudoclass is 1). Search on google for css specificity and you'll find a > better explanation and different methods of working out specificity. There's > even a star wars version on stuffandnonsense.co.uk. > > Anyway, your problem can be solved by simply removing #menu from infront of > them all but keeping it before #menu div a:hover {}, that way the background > position will change on hover. > > Rafael > ______________________________________________________________________ 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/