Welcome to WebmasterWorld Guest from 54.146.221.231

Forum Moderators: not2easy

Message Too Old, No Replies

Holy Grail CSS

not sure how this really works...

     
11:22 am on Dec 29, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 27, 2002
posts:99
votes: 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!

1:03 pm on Dec 29, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 28, 2002
posts:564
votes: 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.

4:31 pm on Dec 29, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Dec 13, 2002
posts:307
votes: 0


box hack [tantek.com].
5:07 pm on Dec 29, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 27, 2002
posts:99
votes: 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;
}

5:09 pm on Dec 29, 2002 (gmt 0)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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

Nick

6:19 pm on Dec 29, 2002 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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

5:15 am on Jan 8, 2003 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14484
votes: 49


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]

9:45 am on Jan 8, 2003 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 0


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

IMHO it's very good advice too

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members