• Registered: December 23, 2008
  • Posts: 119

Topic: CSS syntax question

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;
}

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: CSS syntax question

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.

Last edited by Wickham (January 14, 2009 3:35 am)

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: CSS syntax question

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

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: CSS syntax question

williamrouse wrote:

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".

<div id="links"><a href="#">link</a></div>

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

<span/div/ul/ol/etc. id="links"><a href="#">link</a></span>

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS syntax question

falkencreative wrote:

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

<span/div/ul/ol/etc. id="links"><a href="#">link</a></span>

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.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: CSS syntax question

Thelma wrote:

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.)

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: CSS syntax question

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

Vote up Vote down