What is IE5 fudge

[VUNETdotUS]

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

#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 */
}

 

[Jonathan N. Little]

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

No idea 'cuz...

#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space at right swhen there is no
scroll bar */

what's a "scroll bar"? Invalid type selector

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 {

and what would this do for IE5? I think IE doesn't recognize child
selectors until version 7!

width: 120px; /* ie5win fudge ends */
}

 

[VUNETdotUS]

No idea 'cuz...

This is the part that fixes width/height in IE5 but I though someone
who is familiar with it can explain:
See what I found: http://www.tantek.com/CSS/Examples/boxmodelhack.html

width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}

 

[Els]

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/

 

[VUNETdotUS]

sure




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/

but if I use padding:0;margin:0; do I need that hack at all? And why
IE5 needs 150px? Why not 160 for example? What is the rule of fudge
hack?

 

[VUNETdotUS]

but if I use padding:0;margin:0; do I need that hack at all? And why
IE5 needs 150px? Why not 160 for example? What is the rule of fudge
hack?

Oh, I got it. 150 is width+margin+top. So, I do not need fudge hack if
padding, margin are 0...

 

[Jonathan N. Little]

This is the part that fixes width/height in IE5 but I though someone
who is familiar with it can explain:
See what I found: http://www.tantek.com/CSS/Examples/boxmodelhack.html

width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}

I misread the code because of the "wrap" in the message. Hence the value
in URL's over code snippets.

Now I see that it is over-sizing a block for broken box model. But I
would dump this hack because:

1) If you don't trigger quirks mode IE6+ will correctly size the block

2) Even Win98SE support IE6 so the percentage of folks using IE5x < 1%

3) Hacks can come back to bite you when browsers can CSS support

4) Can have side-effects on other rules

5) Many times can adjust design so for the %0xx of folks that will see
the bug it will not really impair the site!

6) Can get carried a long with each new version of markup like a
vestigial gene until the origin purpose is lost...

 

[Els]

Oh, I got it. 150 is width+margin+top. So, I do not need fudge hack if
padding, margin are 0...

width+padding+border, not width+margin+top.

And indeed, without padding or border, no hack needed.
I usually work around it by setting padding/border only on elements
without a width, and setting width on their parents but no
padding/border.

 

[VUNETdotUS]

width+padding+border, not width+margin+top.

And indeed, without padding or border, no hack needed.
I usually work around it by setting padding/border only on elements
without a width, and setting width on their parents but no
padding/border.

right, width+padding+border. thanks for workaround hint.

 

[Bergamot]

Can anyone explain what IE 5 fudge from CSS below is?

#right {
right: 0px; /* Opera5.02 will show a space at right

I think you can stop right there. Anything that even mentions Opera 5 is
too ancient to take seriously any more. Find a more modern example.

voice-family: "\"}\"";
voice-family:inherit;

The infamous Tantek hack. Don't use it. I wouldn't even bother trying to
get styling similar in IE 5.x anyway. As long as the page is usable,
little differences in the visuals are completely acceptable.

You can bet anybody still using browsers that old have long since
discovered that a lot of sites look a little "off". They have learned to
deal with it, so you don't have to.