Forum Moderators: not2easy
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
++++++++++++++++++++++++++++++++++
But what is this?
#sidebar-b {
float: right;
width: 180px;
\width: 188px;
w\idth: 180px;
margin: 0;
margin-left: 2px;
padding: 4px;
background-color: rgb(235, 235, 235);
[doxdesk.com...]
Never seen it before. Whatever it is, don't worry about it.
But I have seen it... Just because you haven't seen something doesn't mean you should dismiss it without knowing what it does. ;)
As you can see, it seems like there are three
widthwidth: 180px;
\width: 188px;
w\idth: 180px;
Many older browsers (such as Opera 5 and earlier) do not understand rules that contain escaped characters. IE5.x understands rules as long as only the first character is escaped. All modern browsers (including IE6) understands rules with escaped characters, no matter where in the word the character is. (Just keep in mind -- letters A-F cannot be escaped).
Thus, Opera 5 (and other browsers that choke on escaped characters) will pick up the first line (width: 180px;), but will ignore the following two.
IE5.x will pick up the second rule (\width: 188px;), but ignore the last one.
Finally, browsers that do not have the parsing bug (such as IE6, Mozilla, Netscape, Opera 6+) will pick up the last line (w\idth: 180px;).
This hack is usually refered to as the "simplified box model hack". It is more stable than the "standard" box model hack (by Tantek Çelik) and causes less unexpected behavior in non-IE browsers. It is therefore a safer alternative to use as a box model hack (thus its name) even though it can also be used to successfully target older browsers (such as Opera 5).
Strange thing is though, after having looked at so many other sites out there, I've never seen people use it...
Thanks for the info!
To avoid horizontal padding just use margins on child elements instead. (You might need to add a few spans)
To avoid using borders - try a graphical solution.
This is a good way to avoid headaches. :)
To avoid using borders - try a graphical solution.
I was going to say something, then I saw your nick...
;-]
Khem
Khem
So it <em>is</em> the older browsers that we're having problems with.
I just can't see why we need to use hacks at all. Is it just that the solutions is so simple that nobody can see it?
Actually, it's IE 5.5 and older which incorrectly interprets the box model. IE 6.0 conforms to spec.So it is the older browsers that we're having problems with.
I just can't see why we need to use hacks at all. Is it just that the solutions is so simple that nobody can see it?
Well the other solution to not using the the box model hack is to add an additional box within your box and use that to apply padding via margins and whatnot. It's just that people find adding meaningless boxes worse than using a hack. And some hacks, like Tantek's actually conform to CSS spec, they just rely on incorrect parsing of older browsers. I've found that sometimes I already have boxes within boxes just because it's how my site is divided and that I also try to avoid adding padding or borders to any box with an explicit width. That's why relying to much on absolute positioning is bad, it's easier imo to just let everything flow on the page and utilize floats, margins and all that.
And, you can't just dismiss it and say we should just do without margins and paddings. While that may be true, there are times when it is not applicable at all. We need padding and margins, but we don't want IE5 to fream out about it.
[dithered.com...]
You will find the two in question in the "single declarations" section.
There you will find that the \width declaration will be ignored by
- Win NS4.05 (it may crash the app in Win NS 4),
- Win Opera 3.5, 4, 5
- Unix Konqueror 3.0
- various Mac browsers
- handful of others
hacks can be learnt from, then if you want to you can dismiss them, you can. Although personally I've found that they usually teach me something along the way whether I actually implement them or not.
So:
So, you're saying that I should use it, right?
Strange thing is though, after having looked at so many other sites out there, I've never seen people use it...I'd be asking why not! not if...
Understand why you/your design needs a/any hack before you ask should I use one.
Suzy
i just still seem to be having a slight problem regarding layout. in netscape, when i go to a page with more content, my entire layout seems to move a couple of pixels. i suppose there is nothing i can do about this. it's the scrollerbar adding the few more pixels, isn't it?
width: 180px;
\width: 188px;
w\idth: 180px;
margin: 0;
margin-left: 2px;
padding: 4px;
The false value should be 190px as there is padding of 4px set for all sides (8px total for left & right) as well as a margin-left of 2px, could this be it?
ciao
modo.
