Welcome to WebmasterWorld Guest from 54.166.224.46

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)

10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



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

10+ Year Member



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)

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



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)

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



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)

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



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)

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



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

IMHO it's very good advice too

Suzy

 

Featured Threads

Hot Threads This Week

Hot Threads This Month