MSIE Windows fudge - why?

[Alex Bell]

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

[Steve Pugh]

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/>

[Alex Bell]

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