469,306 Members | 1,850 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

MSIE Windows fudge - why?

width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;

I've seen this fragment several times in various layout examples.
What does it mean, and why is it necessary?

Regards, Alex
Jul 20 '05 #1
2 2462
Alex Bell <ab****@tassie.net.au> wrote:
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;

I've seen this fragment several times in various layout examples.
What does it mean, and why is it necessary?


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

IE gets the CSS box model wrong. In CSS when a width is specified this
is the width of the content, and any padding, borders and margin is
added to that width. But in IE the value given to the width is border
to border, with only margin added in addition to it.

But IE has a bug whereby it can't parse certain CSS comments properly,
so in the above example IE sees the 50% width but not the 46% width.
So different browsers apply different widths, which when combined with
the different box models should give identical final appearances.

However, IE in the above applies to versions up to IE5.5.
IE6 (and Mac IE5 and also Opera 7) can apply either the broken box
model or the correct one depending on which doctype is used in the
document. These browsers are also not fooled by the above trick. So,
only use the above hack if you also use a doctype that pushes those
browsers into Standards mode.

See also:
http://www.hut.fi/~hsivonen/doctype.html
http://centricle.com/ref/css/filters/

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2
On Mon, 29 Sep 2003 09:20:16 +0100, Steve Pugh <st***@pugh.net> wrote:
Alex Bell <ab****@tassie.net.au> wrote:
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;

I've seen this fragment several times in various layout examples.
What does it mean, and why is it necessary?


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

IE gets the CSS box model wrong. In CSS when a width is specified this
is the width of the content, and any padding, borders and margin is
added to that width. But in IE the value given to the width is border
to border, with only margin added in addition to it.

But IE has a bug whereby it can't parse certain CSS comments properly,
so in the above example IE sees the 50% width but not the 46% width.
So different browsers apply different widths, which when combined with
the different box models should give identical final appearances.

However, IE in the above applies to versions up to IE5.5.
IE6 (and Mac IE5 and also Opera 7) can apply either the broken box
model or the correct one depending on which doctype is used in the
document. These browsers are also not fooled by the above trick. So,
only use the above hack if you also use a doctype that pushes those
browsers into Standards mode.

See also:
http://www.hut.fi/~hsivonen/doctype.html
http://centricle.com/ref/css/filters/

Steve

Thanks, Steve, that gives me something to think about.

Regards. Alex

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Jens Fudge | last post: by
5 posts views Thread by Alex Bell | last post: by
2 posts views Thread by mannerfanner | last post: by
2 posts views Thread by James_patageul | last post: by
1 post views Thread by ticmanis | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.