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.