Sent by Michael Wilson on 3 December 2004 17:05
Bob McClelland wrote:
> Thanks to all who responded. The reason I'm labouring the point here is
> because the very simple styling:
>
> width : 450;
> w\idth : 400;
>
> type of thing works for me (IE 5.5, IE6, quirks and standards, Mozilla 1,
> Firefox 1, Opera 7), so why should I use anything else? Michael (Wilson)
> suggested adding an extra line (which is OK):
>
> width: 400px;
> \width: 450px;
> w\idth: 400px;
I suggest using the second method because it supports browsers that do
not understand the escapes (\) found in the hack. Consider the following:
(This is assuming you have set a combination left and right
border/padding/margin values, which total 50px.)
width: 450px;
w\idth: 400px
In the first line, you are establishing a width of 450px for all
browsers; although, that width value is only correct for browsers that
have a broken box model e.g. IE 5.0.1 and IE 5.0.
In the second line, you override the broken box model value with a
proper width value; however, the override is only going to work for
browsers that understand escapes (w\idth:). Browsers that do not
understand escapes and *do* properly implement the box model (e.g. Opera
5) will use the "broken box model width" of 450px, which is incorrect.
In the alternative I gave you, line one sets the base width to a value
that works in all browsers that properly implement the box model.
width: 400px;
Line two sets a value for all browsers that understand escapes, which
includes IE 5.0.1 and 5.5 where the box model is broken:
\width: 450px;
In the final line, we take advantage of a parsing bug found in IE 5.0.1
and 5.5, which helps us isolate these browsers. While IE 5.0.1 and 5.5
understand \width just fine, neither browser understands w\idth and
ignores the values set in this line. Modern browsers such as Mozilla,
Firefox, Opera 6+, and IE 6 understand both \width and w\idth and due to
the cascading nature of CSS (the order of the properties) they apply the
value set in the last line.
w\idth: 400px;
Now all browsers, regardless of box model issues or ability to handle
escapes, are given a proper width value for the box.
The only time this does not work as intended (that I am aware of) is
when you intentionally *force* IE 6 into quirks mode. Putting IE in
quirks mode used to be an easy way of keep all of your IE styles the
same. With this "Escaped Character Hack" as Eric called it, there is no
reason to force IE 6 into quirks mode that I am aware of.
If you do come across a situation where you must do so, in terms of the
box model, you'll need to treat IE 6 the same way you would IE 5.0.1 and
IE 5.5. The best way to address this issue at that point is to use a
conditional comment, which addresses *all* IE issues in a separate
stylesheet. As far as I know, there is no hack that works for IE 5+
while IE 6 is in quirks mode, which is why you *should* use conditional
comments for this.
Additionally, if you fall back on your original method (width: 450px;
w\idth: 400px;), while IE 6 is in quirks mode, you'll find it doesn't
work as you might think, because IE 6 *will* use the w\idth: 400px;
value, which will be incorrect.
> I knocked up a very simple example of this at:
>
> http://www.treyarnon.fsworld.co.uk/bmh.html
>
> and tested it with my (few) browsers. Fine!
Force IE 6 into quirks mode by placing <!-- foo --> (any comment) above
your doctype in the page, save it, and then view with IE 6. You'll find
it's broken and displays #tester at 500px rather than the 650px you
intended.
--
Best regards,
Michael Wilson
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
