Posted by Els on 11/09/07 16:47

VUNETdotUS wrote:

> Can anyone explain what IE 5 fudge from CSS below is? Why width? What
> about height?

sure :-)

> #right {
> position: absolute;
> top: 0px;
> right: 0px; /* Opera5.02 will show a space at right swhen there is no
> scroll bar */
> margin: 20px;
> padding: 10px;
> border: 5px solid #ccc;
> background: #666;
> width: 150px; /* ie5win fudge begins */
> voice-family: "\"}\"";
> voice-family:inherit;
> width: 120px;
> }
> html>body #right {
> width: 120px; /* ie5win fudge ends */
> }

IE5 uses a different box model than current browsers in standards
mode: where up-to-date browsers will calculate the border and padding
to be added to the width of an element, IE5 takes them off.
So, for IE7/Firefox, the padding of 10px left and right, plus the
borders of 5px each, will total 30px to be added to the 'usable' width
of the element (120px), and display it as a total of 150px wide.
IE5, needs to see width:150px, and it will then take the padding and
border width off, and also leave 120px for the content.

The fudge is where IE5 can't read it anymore. So, IE5 only sees
'width:150px', and uses that style. It then stops reading till after
where the fudge ends.

Other browsers will not be fooled by the fudge, and see width:120px;,
which is what they should use, so everybody's happy.

Then there is the 'make Opera 5 happy rule', see the article you just
linked to in your reply to Jonathan.

For more combinations of hacks for different versions of different
browsers:
http://centricle.com/ref/css/filters/


--
Els http://locusmeus.com/

[Back to original message]