what does this means

I've seen this in some websites, specially in css examples and tutorials websites, but none of them actually explains it (or at least I havent seen any), they just put it there and I dont understand it.

Here it is:
#content {
padding: 160px 50px 40px 50px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ccc;
text-align:left;
width: 600px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 498px;
}
html>body #content {
width: 498px; /* ie5win fudge ends */
}

Could someone please explain the commented part about the "ie5win fudge"? whats is that? :eek: and how exactly does it works (if I wanted to use it) ?

IE5 interprets the line:

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

As a '}', which in CSS defines the end of a ruleset. Since browsers after it interpret it as merely a quoted string containing a }, it's ignored.

Therefore, you can put IE5-specific code before that line, and then you can put the >IE5 code after that line, thus letting you correct for IE5's box model problem.

It says:

Tell IE5 that the width is 600px, then tell everything else that the width is 498px.

The last bit, with html>body, tells older opera versions to use 498px too, as it doesn't suffer from the box-model bug, but DOES have the quoted brace bug.

Clear as mud? Heh.

Edit: Here's a better explanation: http://tantek.com/CSS/Examples/boxmodelhack.html

thanks

:p btw, I prefer your explanation better, shorter but enough for me considering how tired I am of reading tons of css tutorials and examples the past couple od days

personally i prefer this much less ugly version:

<selector>
{
/* specify borders and paddings if any */

width: <content width> !important;
width /**/:<content width + paddings + borders>;

/* other declarations may appear anywhere in this rule */
}


more info can be found here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html

thanks, this second site explains it better than the other one :)