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/
