Digital Web Magazine

The web professional's online magazine of choice.

Keep CSS Simple : Comments

By Peter-Paul Koch

November 6, 2003


Seth Thomas Rasmussen

June 30, 2004 8:53 AM

While I agree with this, epsecially on the topic of principle, I wonder: what then? Certain IE hacks such as ones for the erroneous IE5 box model, in particular, seem, dare I say, necessary to solve certain problems. What would you do instead?


August 16, 2004 12:43 AM

Two comments…first, Seth, to answer your question, there is a simple hackless way to address the box model problem in IE 5 and thats to simply put your content inside a div inside another div. Set your padding and borders in the outer div and your actual content width free of padding and borders on the inner div that holds your content. Alas! Instant hack-free box model fix for IE 5!

Now to my main point…I agreed with the hackless theory for awhile then really thought deeply about it and here is why I disagree with the authors point, and most designers should too. No matter what the new browsers do, even if they dont fix the css bug but fix the hack, or the opposite worst-case scenario, fix the css-bug, but dont fix the hack, where now your hack shatters your site design, then I say the following:

1. Whats new about that situation and any different that HTML and table-based hacks and fixes? We went through the same drama with Netscape 6 compared to 4, and IE5 to 6. To try and prepare for a future thats unknown is almost pointless at this point and the same situation you would find yourself in any web development environment. It why they pay us as developers to support this unfair software environment we find ourselves desgning for.

2. Who’s to say that the new browser doesnt introduce completely new css support that is still non-standard? If and when it does, your sites (and future sites), hack or no hack will probably need some changes, as will millions of other designer’s site. Or better, if they dont fix the bug or hack, you still support the fix. But who is to say. As well, how much time does it take for most new browsers to propogate and take market share anyway? That takes time and in the mean time, as that situation evolves, your code continues to support the current browser.

3. The theory behind hacks is in general support for older versions of browsers and a few current ones. But the majority of hacks actually apply to older versions prior to the one in use now, right?....meaning, those hacks have already been fixed or addresses in current browsers! IE’s family of hacks is a perfect example….almost all of them fix item hidden from the current browser, so are not going to appear again ever, anyway, so should be safe! Whats the likelyhood of a new browser going back and picking up the bug again or causing old hacks to work? Not likely…..kinda like someone’s grandson choosing to drive grandpa’s old Mercury in the garage rather than a new Mazda RX-8 he saw at the dealership. Not likely to go back to grandpa’s hoopty!
What this means is you should be able to use 90% of current hacks which should be designed for dying or dead browsers. IE 5 for MAc and PC and all the versions before and by OS are dying and will be dead within a few years. Those hacks will die with them, more than likely. And when they do, you simply remove them for your next set of projects.

4. I agree that managing hacks and complexity is a valid point. But I say its no less complex than table structures, or Javascripted sites whos menu are soly dependent on DHTML (with one click of a mouse, that javascript can be turned off!), or the mess that Visual Studio makes with new ASP.NET. As a developer now working in this environment, its all par-for-the-course my man, and its why we are supposed to make the big bucks….dealing with complexity and bugs and all that nasty stuff that supports our work and makes it run well in the end.

5. CSS hacks by their nature, despite some complexity, are very tiny footprints and because they can (and should be) managed in a central repository in a site file or database, do allow us some reasonable chance of addressing any “hacks-gone-wild” in a site should a deviant browser raise its ugly head later. This is SO much more preferable to all the crazy tables and spacers we have all been so accustomed to the past several years.

6. Let’s look at the true evolution of CSS and browsers today. Is it really that bad? Is the box model issue and IE’s peekaboos and 3 pxel shifts, etc. really so earth-shakingly horrible. With a few simple hacks you can block out a whole genre of buggy effects in a single agent, and as long as you know what you are doing and where to look for your managed css code, you can reveal the bugs. I dont think the the evolution of todays browsers have very far to go before we see 90% of them fully in line with some kind of standard. And IE 7, no matter when its release, Im certain, will address most of the probelms. Microsoft’s billions will make sure of that! But if you use some basic simple CSS, stay away from some CSS2 stuff, and some caution, you can create some simple effective CSS layouts with minimal hacks and do just fine. We all have the power to do that now thanks to the huge amount of data online.

7. The state of code today is such that ALL web code, hacks included, with a simple mistype (in the case of JavaScript), the whole page can come tumbling down. Hacks really dont introduce any more issues than what is faced today in current coding practices. I keep everything simple as a developer, though at times, some pretty crazy dynamic html and and even javascript is given as output in the system I build at times, and its the nature of interpreted code that sometimes a single variable type, or comma shift or datetime error or even user input in a form can bring a whole page down. So, adding a few hacks is part of what we have to do as developers. Just practice good managed code structures….know what you are doing and what the fix is, I say!

8. Finally, let’s say you dont use any hacks at all and your site has a few subtle layouts that account for IE. When a new browser comes out, you say no problem, my site should work great if it standardizes (or it does not). Well, suddenly your layout WILL change if say, IE suddenly supports standards and then those standards make your site shift in design for IE viewers enough where site owners wonder what happened and want it “back the way it used to be”. You site could not only change for IE users but your simple hack-free css could now require a fix to get it back to what it was which could get even nastier. Imagine the hacks to make your site look wrong for a client! Ouch! Ive seen that happen….some clients just visually know what they like, and will at times, wish to preserve a look in a site, if it was changed. Looks like no matter what you do, a new browser will cause issues. Case closed!

Either way, as I see it, when new browsers come out, its not really your responsibility and not really your problem if a client’s or your own sites shift or break in design because of a new browsers support for CSS shifts, hacks or not. Its the nature of the internet these days with so many software vendors, that things will continue to evolve, and you HAVE to stay ahead of the game, even if the rules change. But you cant predict that future as a web designer. Thats not anyone’s job. Thankfully, most browsers have some level of backwards support for tables and ugly code, and probably always will. Can you imagine all the millions of site owners who would be up and arms if Microsoft moved to a browser like Mozilla overnight, with no warning, input from the web community, or support for older code. We would love it but the rest of the work would be reaching for the nearest hack and quick fix. So, I love the simple CSS rule, and keeping things elegant and usable and hackfree. I do design my sheets acrefully to maximize all those effcets and apply hacks last of all if needed. I however believe its a necessary evil that is slowly going to fade away like Netscape 4 has been the last few years….a truly large thorn in our sides. So, have faith, use hacks….its makes sense!


Web Design

September 24, 2004 5:28 AM

I want let everybody know that this article is really worth reading on behalf of our company programmers, who found it very useful when we just started our business.

Lorenzo Gatti

February 4, 2005 8:20 AM

Hacks are a bad thing because leaving behind old browsers is necessary for progress.
Users accessing a modern site with Netscape 4 and IE are not an important part of the public: they are obsolete and/or stupid and they probably belong to useless market segments.
Even when they are welcome, users of obsolete browsers should be stimulated to move on by a feeling of inadequacy: when they see ugly layouts and they assume they are good-looking sites mangled by their inferior browsers, they are ready to improve standard support on the Web.


July 24, 2005 7:05 AM

I’m glad I read this article and the comments. I’m just glad emphasis was placed on the fact that new browsers will always be released and that CSS hacks isn’t always a solution.

I think there are many people out there who have problems with CSS and assume they need a hack for it, when it could just be they need to validate their CSS or take a slightly different approach. That said, is there actually a formal definition of what a CSS hack actually is? Apologies if its already been stated and I missed it…its almost 1am here.

some guy

October 27, 2005 12:26 PM

preach, preach, preach… more “i am god” background noise, all sound+fury without any real solutions offered. do any of you preachers remember when “evangelism” was a bad word? put your star-hacks in a separate style sheet for IE only and to hell with the rest.

Sorry, comments are closed.

Media Temple

via Ad Packs