homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Holy Grail CSS
not sure how this really works...
newnewbie1

10+ Year Member



 
Msg#: 473 posted 11:22 am on Dec 29, 2002 (gmt 0)

OK I'm looking at the famous 3-column "holy grail" CSS layout as described here:
[glish.com...]

I'm still not sure about the center colum...
What in this stylesheet code makes it expandable:

#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

Also, what is voice-family?

thx!

 

Longhaired Genius

10+ Year Member



 
Msg#: 473 posted 1:03 pm on Dec 29, 2002 (gmt 0)

A CSS box (and HTML in general) will expand laterally by default, so no special provision is needed.

"Voice-family" is a CSS selector used with screen readers but it is used here as part of a hack to deal with the way Internet Explorer 5 renders padding and margin different from other browsers. A search for "tantek voice-family hack" will tell you what you need to know.

WibbleWobble

10+ Year Member



 
Msg#: 473 posted 4:31 pm on Dec 29, 2002 (gmt 0)

box hack [tantek.com].

newnewbie1

10+ Year Member



 
Msg#: 473 posted 5:07 pm on Dec 29, 2002 (gmt 0)

Oooh, this is giving me a headache!

I'm still not sure what this is doing...

It's got 2 margin-left & margin-right... 199, and 201. That just doesn't make sense...

Also I'm not sure what this does either:
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 5:09 pm on Dec 29, 2002 (gmt 0)

If you study the box model hack site by tantek (link given above) all will become clear ;)

Nick

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 6:19 pm on Dec 29, 2002 (gmt 0)

It's got 2 margin-left & margin-right... 199, and 201. That just doesn't make sense...

That's what the "voice-family hack" is. The first set are read by IE which then stops reading because of the voice family parse error...the second set are for everything else

and then just in case, it's also called "the be nice to Opera Rule", you add the bit below which repeats the widths in a way that Opera (and Newer NN?) browsers like

Also I'm not sure what this does either:
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

It took me ages to figure this out too, and I try to avoid using pixel perfect designs now for this very reason ;)

Suzy

bill

WebmasterWorld Administrator bill us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 5:15 am on Jan 8, 2003 (gmt 0)

I'm really late to the party on this one, but ... papabaer gave me some great advice about this very problem last year.

avoiding Tantek Celig's box model hack [webmasterworld.com]

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 9:45 am on Jan 8, 2003 (gmt 0)

Thanks for that link Bill, hadn't seen that post.

IMHO it's very good advice too

Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved