CSS syntax question

[williamrouse]

I was reading an article and trying to duplicate the contents of a CSS file which contained code about a translucent link for menu items when I came across these definitions in a CSS file. The syntax of the div before the class statements confuse me and I don?t understand what this means. Does this mean that for any div in a class named content or links the following rule applies? Thanks!

div #content {
   background: transparent url(../images/halfscr-blue.gif) 0 0 repeat scroll;
   voice-family: "\"}\"";
   voice-family: inherit;
   background: #468 url(../images/shell-blue.jpg) 0 0 no-repeat fixed;
}

div#links a {
   background: transparent url(../images/halfscr-black.gif) 0 0 repeat scroll;
/*  voice-family: "\"}\"";
   voice-family: inherit; */
   background: transparent url(../images/shell-fade.jpg) 0 0 no-repeat fixed;
}

[Wickham]

It's actually nothing to do with voice-family, or at least not using it for that purpose, it's a hack to use a browser bug for a different purpose.

 

IE browsers 5.0 and 5.5 use the first image, the .gif, but browsers which parse correctly will overwrite the .gif with the .jpg image because they ignore the \ and } in specific places when used with the voice-family attribute and apply the second image while IE5.0 and IE5.5 stop at the special \ and }.

 

See http://www.ericmeyeroncss.com/bonus/trick-hide.html and

http://tantek.com/CSS/Examples/boxmodelhack.html and

http://archivist.incutio.com/viewlist/css-discuss/37121

which explain the hack when used in different circumstances.

 

I don't think it's used much now, people prefer to use a conditional comment.

Edited January 14, 2009 by Wickham

[williamrouse]

But what is the deal with the "div#links a"?

Why is it not just "#links a" and then the div in the HTML referring to class "links"?

WBR

[falkencreative]

But what is the deal with the "div#links a"?

Why is it not just "#links a" and then the div in the HTML referring to class "links"?

WBR

 

it's just more specific. For example, "div#links a" refers only to "a" elements inside a div with an id of "links".

 

link

 

whereas just "#links a" could refer to any "a" element within an element with an id of "links":

 

link

[Andrea]

whereas just "#links a" could refer to any "a" element within an element with an id of "links":

 

link

But considering that an ID is supposed to be used only once on any given page, that kind of seems redundant - not wrong, but overkill. Or not? However, for a class, it makes perfect sense to me.

[falkencreative]

But considering that an ID is supposed to be used only once on any given page, that kind of seems redundant - not wrong, but overkill. Or not? However, for a class, it makes perfect sense to me.

 

I would usually agree that it is overkill. However, since the stylesheet uses usually links to all the pages on the site, it would allow the coder to use the #links id in different ways. Sure, it can't be used more than once on the page, but it could be assigned to a different element per page. (In my opinion, that doesn't make sense -- I'd prefer to keep my use of ids consistent, but it is an option.)

[williamrouse]

Thanks for the comments. It makes sense. Now to remember this conversation in my daily life.