Box Model Hacks | June 17, 2004
I’m not a huge fan of CSS hacks. In fact the only hack I ever use is Tanek’s box model hack, and then, only when absolutely necessary.
I’ve noticed that developers have started using different hacks to get around IE box model issues, so was wondering what’s the current preferred method and why?
Comment
IE7 or putting IE6 into quirks mode and using the underscore hack (‘_width:100px’ for example).
Comment
I’m firmly on the side of standards based, ZERO hacks. The box model hack, while very clever might come back and bite us when the next version of IE comes out.
If I come up against the box-model problem, my prefered solution is to embed the offending element in a new inner div and apply my borders/padding to that. Hmm, maybe I should blog that technique - I can’t remember ever seeing that written down somewhere.
Sure it adds a level of tag soup, but as the rest of my pages tend to be relatively cruft free, it doesnt make too much difference.
If I ever come across a problem I can’t fix with an extra div or with a minor reworking of the layout, I fall back on CSS Browser Sniffing with PHP: http://richardathome.no-ip.com/index.php?article_id=106
(which itself has it’s drawbacks but IS future proof)
Comment
I am using the Tanek’s hack because I find it less messy then adding divs to code - removing this hack from CSS once the browser interpret boxes correctly is for me easier than cleaning <div> from all pages - all together more a religious question maybe :)
And then special hacks for different versions of IE all nicely summarized here
Comment
I agree that trying to avoid hacks is probably better. My solution (although not always possible) is to make a point of trying not to set fixed horizontal size and padding/margins or vertical size and padding/margins on the same object.
If this means wrapping the object in another div then as Richard says, if it’s not too soupy it’s ok.
Comment
I tend to just give the IE size in the regular element and then use child selectors to set the real size, since IE doesn’t get child selectors. I can’t recall if this causes problems in any other browsers, but I only have access to IE6 and Firefox, and it works in those.
By the way, his name is “Tantek”, not “Tanek”. It’s even in the URL: tantek.com.
Comment
I prefer the Simplified Box Model Hack by Andrew Clover (http://archivist.incutio.com/viewlist/css-discuss/1793) because it’s easier to remember:
width:130px; /* Opera 5 */
\width:150px; /* IE5Win */
w\idth:130px; /* Others */
Comment
Hacks schmacks! Develop a clean, standard, forwards compatible style sheet for modern browsers like Mozilla & Safari, then import a new style sheet over the top using an IE-only conditional comment and a <link> tag to layer a “patch” style sheet over the top exclusively for IE 5.0, 5.5, 6.0, or any combination.
it keeps your ‘hacks’ and patches separate from your clean, forward-thinking style sheets stylesit allows you to simply and easily remove those patches when the browsers become obsoleteyou can shave a bit of bandwidth and download time off the style sheets needed for non-IE browsers
Sure, it may be a little overkill for a single page, but for a large site, it’s by far the cleanest method I’ve ever tried.
Speaking of hacks, has anyone stopped to think how future browsers might interpret hacks like the Tantek hack? Who knows, but I’m glad I won’t have to revisit 10’s or 100’s of style sheets fixing up that mess in a year, or two, or ten!
Comment
I tend to use the Simplified Box Model hack. I find this hack to be fairly elegant and very easy for me to remember.
I tend to use it like this:
div {
padding: 10px;
width: 100px; /* IE 5.x */
w\idth: 80px; /* Everyone else */
}
This appears to work fine in:
- IE (Mac & Win)
- Netscape 7+ (Mac & Win) don’t know about lower versions
- Mozilla/FireFox/Camino/etc.
- Safari
- Opera
I hope this helps.
Comment
I have been setting an outer box with no padding or margins, and then setting an inner box with padding applied to it.
In most cases, the outer box, which has the colors and borders applied to it, does not change from one IE to the other. The inner box that has the padding applied to it will shrink up, but it is not very noticeable.
Rare cases, I will use the box model hack.
Comment
The only hack/fix I use is a simplified Box Model Hack :
width: 100px !important; width /**/:120px; padding: 10px;
You can find this hack and other here http://www.info.com.ph/~etan/w3pantheon/style/abmh.html.
I like this hack for it’s simplicity, I can actually remember it :-)
I will however try to avoid it by padding elsewhere and I also try to avoid putting too many container block.
Comment
Yeah I tend to try and avoid it as much as possible and when I do use it then I simply clear it up by using the !important qualifier. I’m not sure how compatible this is but it works with IE6.
And I produce valid CSS without any additional markup or confusing rules.
Comment
No hacks here. I don’t like them, because they create a lot of double css code.
Comment
What would you be putting specific widths to that would need padding?
You have a div with a pixel width, just about anything that goes inside that could have the padding. P, UL, FORM, etc. could all have a padding set to them. No need to put it on the padding on the container div with the specific width.
I have never really been in a situation where I felt the BoxModel was required. Perplexing how it got so big…
Comment
I don’t think using the approach laid out by Richard (first, there are others) is a bad thing. For most of my content, there is a semantically correct block element that works as a container for me to set the height and leave the padding/margin to the children (whether it’s an h, ul, etc). I’m also not so “pure” to think that it’s bad to have the occasional container div to group a bunch of elements. If you limit it to just a couple for the major sections of a document, you should be OK (and no one will laugh when they view source).
Comment
I use conditional comments for IE <6 (IE 6 itself is fine, since I don’t send it into quirks mode). It’s much easier than keeping track of box model hacks, and it’s much easier to just have all IE-styled junk confined into its own style sheet.
Comment
Oops, looks like my comment was cutoff… here’s the rest that was typed:
I use conditional comments for IE <6 (IE 6 itself is fine, since I don’t send it into quirks mode). It’s much easier than keeping track of box model hacks, and it’s much easier to just have all IE-styled junk confined into its own style sheet.
Comment
This is my favorite, because it is lite and easy to follow.
width: 100px !important; /*for mozilla*/
width: 140px; /*for ie5.x*/
width/**/:/**/100px; /*for ie6.x*/
Comment
Manlio, Joseph: sadly that invalidates your CSS, but then I suppose CSS validation is less important that markup validation. After a few times, you get used to it:
“"}"”
or my version:
“"}/*"”
which makes non-passing browsers ignore the next rule rather than parse it. Be sure to include the string
/* */
afterward to make sure those browsers don’t ingore the rest of your stylesheet, though.
Comment
David, recently I used the Simplified Box Model Hack and, according to the W3C, the stylesheet is valid (http://www.miranfilm.com/version2/code/main.css)
Comment
I’m with Justin French on this one: polluting stylesheets should be avoided as much as possible. It’s unfortunate (sort of) that all agents don’t have something like conditional comments, but since IE is the agent that generally causes the most trouble, it’s thankfully not too much of an issue.
At worst, if you’re going to pollute a stylesheet, I’m of the opinion that it should be done in a separate section at the end, so the maintainer of a stylesheet doesn’t have to go hunting through potentially hundreds of style rules to find out what’s going on. The maintainer isn’t necessarily the author, after all, and clarity of a stylesheet when maintaining Web content can be just as important (and potentially more, I suppose) as clear structure.
Granted, using a separate section will add weight since you’re duplicating selectors, but no solution is perfect.
(offhand, I really like this comment preview thingy)
Comment
I’m a tantek * pass filter user all the way.
I link a single stylesheet from the html page and import all my other style sheets from that. Tantek’s filters let me pull in extra stylesheets before or after my main sheets to fix things in specific versions of IE.
It keeps the main css clean. And targeted CSS rules are easy to work with.
Comment
Actually, I prefer to use the child selectors from CSS2 specification:
html>body &helip;
The IEs doesn’t supports this declaration (IE5.x at all) then in quricks mode (for IE6). To say IE6.0 render the pages in quircks mode I use XML declaration starting the XHTML document:
<?xml version=”1.0”?>
This technique can be used with XSLT transformations too. All you need is to say the parser to generate the XML document instead of HTML. This approcah was already described on some CSS blogs.
I’ve tried to use nested divs technique too, but the code becomes unreadable. This approach seems to be as worth as using the tables — to much code with too less semantic meaning.
To see an example of using child-selectors approach, see http://www.makroizol.ru — the site I’ve completed 2 week ago.
Comment
I’m all with Justin and J.King on this one.
I start by linking to my main stylesheet, then right after that I link to a style sheet containing alternative styles required for IE browsers. I think this method keeps everything nicely separated, which helps me when I come back wanting to change something.
Comment
Well I used to use the full box model hack only when absolutely necessary. I seem to have missed the simplified version. I’ll have to start using that one.
I did try the child selectors hack recently for swapping pngs with gifs, but it messed with other browsers, so I dropped it. I’m not keen on putting IE6 back into quirks mode. And it didn’t seem to work in Webkit browsers (ie. Safari, Omniweb, etc.) So I then really dropped it fast.
The final solution for that particular file was to use !important, it seems to work everywhere now and I don’t have problems remembering things. But like I said the simplified BMH might work well to.
So only when absolutely necessary. :) my 2¢
Comment
My goal is also as few hacks as possible, so my solution is as follows:
1. Use the XHTML Transitional DOCTYPE declaration. Many problems disappear instantly in IE6.
2. Use “-moz-box-sizing:border-box;” in my stylesheet (as globally as practical), which makes Gecko-based browsers use the traditional box model like IE. The traditional model, IMHO, is vastly superior to the W3C model.
3. Opera, Safari? Fuggedaboudit. I refuse to design for browsers I will never use. The way I figure, if it renders correctly in IE6 and Firefox v0.9, it should be decent enough for them.
4. Use a simple HTC to give IE6 global transparent PNG support. It’s a hack, but at least it’s just one line in my main stylesheet.
Comment
I use double nested divs on my code.
Several of people have pointed out that doing a box model hack in the CSS of the site will be easier to remove on down the road and they are right…
Except that I won’t need to remove those extra div’s.
You see, using those divs now does add to some tag soup, but it is still perfectly valid. Once IE does support correct standards, it should render it the same! At that point, I can stop using the double-divs, but until then it is a great solution that is light weight (<div> </div> is only 11 characters) and works easily and predictably across a number of browsers.
my 2¢
Comment
I’m in the “can’t stand hacks” camp as well; I’ve just been using margin+div instead of padding. However, Shaun Inman’s method seems pretty awesome.
Comment
I am not a CSS guru but one of the things that has really put me off a much wider use of CSS is the use of hacks. To be honest, I regard these as a real obstacle in encouraging people to use CSS more widely. For this reason, I use a compromise of simple layout table plus CSS for most websites - may be an old fashioned way of doing it perhaps, but it cause me fewer problems.
Comment
I simply dump the contents of the div into an extra div (called “words”, interestingly enough) and give it a margin. Or you could give the div a text-indent value (but that doesn’t affect the vertical position)
Comments on: Box Model Hacks
Jump to the comment form