Question of width

[flashfan]

* html .cName { width: 750px; w\idth: 749px; }

Don't know what the second width means.

[flashfan]

Here is an example:

* html #content {
width: 749px;
w\idth: 741px;
}
#content {
position: relative;
width: 741px;
background-color: #FFF;
border-left: 8px solid #FC3;
text-align: left;
}

[benihana]

its some sort of hack to target specific browsers - cant remeber which ones,. im sure someone else will be able to shed more light....

[photon]

Yes, it's to compensate for the difference in box model implementations between IE and the other browsers that get it right. :)

[flashfan]

Which one is for IE? width or w\idth?

[choster]

The star+backslash is for IE 5 and known in design circles as the Tan Modified Simplified Box Model Hack. See [css-discuss.incutio.com...] for a general overview of hacks used to get around the non-standard IE box model.

[createErrorMsg]

The star hack ("* html SELECTOR" part) delivers the contained rules to IE browsers only.

The second width containing the escape backslash ("w\idth") delivers the second value to IE6 in Standards mode. You'll find that that second width always matches the width set in the original selector for compliant browsers.

Here's a brief explanation: in Standards mode, IE6 functions, in SOME respects, like well-behaved browsers such as Firefox and Opera. One such way is in it's proper implementation of the box model. The star hack is used to fix the broken box model found in IE5.x, but since it also delivers those settings to IE6, you need to give the compliant setting back to IE6 or it will bungle the layout. IE6 is able to read past the backslash in the second width, but IE5.x is not. So 5.x ignores the second width while IE6 implements it.

[SuzyUK]

the order in the cascade is important too.. the example given should be the other way around for it to work as intended.

#content {
width: 741px; /* width to all browsers */
}

* html #content {
width: 749px; /* width to all IE's only */
w\idth: 741px; /* correct width back to IE5/Mac and IE6 */
}
.. you would need to put the * html #content rule later in the cascade or all IE's will be using the width in the #content rule negating the hacks purpose and cEM's great explanation ;)

Suzy