Hacked to Death

Everyone working on the front lines (building for the front-end) will have likely encountered a page that despite being a coding piece of art looks great in one browser but falls apart in another.
If you don’t work for Microsoft you’ll know the problem is usually with the Internet Explorer browser. A lot of the time tweaking a style sheet a little can solve things but sometimes there is no other option but to add a hack.
No one likes hacks, in fact I go to insane lengths trying to find an alternative before I will use one. However, if it is necessary to ad a hack is there a good way, or is a hack always going to be ugly and we just have to face it?
Well I’ve come across 2 methods that really make the best of a bad situation.
The first was mentioned briefly in the podcast with Dave Shea I referenced in my last article. He recommends putting all your hacks in separate external files. So for a css hack, an additional style sheet just for hacks can be made. This leaves you main style sheet(s) clean and also if a new browser comes along and chokes on your hacks you can either remove them all easily or use some javascript to cause that hack (style) sheet not to display for that browser.
The other method I found when reading an article by Kimberly() on one of Drew’s sites 24ways(). Her method is to write her css to keep IE5-6 happy (when there is a conflict) and then immediately follow the style with a style that works with all other browsers. The 2nd style has a child selector so IE5-6 ignores it but IE7 does not. This means your hack should be futue proof as when IE7 is released it won’t choke on your hack and as it is more complient the css used for other browsers in most cases will work.
Example (taken from mypetsite.co.uk):
/* Main Navigation */
#navbar {
width: 100%;
height: 25px;
background-color: #576079;
position: fixed;
top: 0px;
left: 0px;
margin-top: 0px;
padding: 0px;
z-index: 97;
border-bottom: 1px solid white;
color:#FFFFFF;
}
/* navigation for IE5-6 */
#nav
{
color:#FFFFFF;
width: 100%;
position: fixed;
top: 0px;
text-align: center;
margin-left: 15px;
left: 50%;
margin-top: 0px;
padding: 0px;
z-index: 98;
background-color: #576079;
}
/* navigation for all other browsers */
#navbar > #nav {
position: fixed;
width: 690px;
margin-left: -340px;
}
This will bulk up your style sheet but you can keep it to a minimum if you only put the attribute of the class/ID/tag you are hacking in the child style.
Well I hope it makes sense. In most cases it should let your pages validate. This is a lot better way than random hacks you may have to revise when IE7 becomes mainstream it doesn’t mean we should hack our pages to death. Remember a hack is a last resort but at least it can be a little more organized.
Filed under CSS, Other Authors, Web Standards, hacks |One Response to “Hacked to Death”
Leave a Reply














[...] For the most part if a design works in FF and IE, Safari will quite happily play along. However, on one page where I have used relative positioning to move an image up by a few pixels I encountered a problem. FF and IE6 didn’t line up. I was forced to use an IE6 hack (see previous hacked to death entry) to set a different pixel adjust for the two browsers. While this solved the problem in IE6, Opera, FF and IE7 - Safari was not happy. [...]