CSS Hacks - IE8, IE7, IE6 and Firefox
With more users starting to use IE8, the other day I found myself needing to update a certain style that was not displaying correctly in the IE8 browser. It was displaying correctly in Firefox 3 and earlier versions, as well as IE6 and IE7. So I needed to find a way to also target IE8. After searching the internet, and coming across only a couple of options for IE8 (which I couldn't get to work), I decided to use different hacks together to achieve the outcome I needed. It's a little bit of work for just a small thing, but I have no doubt better solutions will present themselves.
Below I have added some different options, depending on what browser you need to target.
Option 1: IE8 and Firefox using the same style, IE6 and IE7 using another
#block {
margin-top: 5px; /* target only IE8 + Firefox browsers */
*margin-top: 10px; /* target only IE7 and older browsers */
} Option 2: IE8 and Firefox using the same style, IE6 and IE7 using their own styles different to IE8 and Firefox.
#block {
margin-top: 5px; /* target only IE8 + Firefox browsers */
}
* html #block { /* target IE6 only */
margin-top: 50px;
}
*+html #block-block-10 { /* target IE7 only */
margin-top: 100px;
}
Option 3: Similar to above, but if you need to target IE8 and Firefox separately.
#block {
margin-top: 5px; /* target only IE8 + Firefox browsers */
}
#block-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */
margin-top: 20px;
}
* html #block { /* target IE6 only */
margin-top: 50px;
}
*+html #block-block-10 { /* target IE7 only */
margin-top: 100px;
}
Option 4: Similar to above, but if you need to target Firefox 3 and Firefox 2 separately.
#block {
margin-top: 5px; /* target only IE8 + Firefox browsers */
}
#block-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */
margin-top: 20px;
}
#block-block-10, x:-moz-any-link, x:default { /* targets Firefox 3.0 and newer, overriding the style above */
margin-top: 30px;
}
* html #block { /* target IE6 only */
margin-top: 50px;
}
*+html #block-block-10 { /* target IE7 only */
margin-top: 100px;
} Hopefully this makes sense, I have tested it so hopefully it works for you. Feel free to give feedback or other solutions you have come across.
What others have said!
Thanks for your comment and you have a legitimate point regarding using valid css which we aim for in every development. Using valid css is important and there are various valid and non valid ways to target different browsers and their versions. Below are some additional valid css selectors.
IE 7 and modern browsers only
html>body { }
IE 7 only
*:first-child+html { }
IE7 and below
*:first-child+html { } * html { }
IE6 and below
* html { }
by:
Developer
on:
4 May 2010
@ 12:48 pm
Your hack for IE7 and below really shouldn't be used as it is not valid code.
#block {
margin-top: 5px; /* target only IE8 + Firefox browsers */
*margin-top: 10px; /* target only IE7 and older browsers */
}
Better off with some alternative like *:first-child+html and * html which are valid. It may be a bit of extra code but it its better than code that doesn't validate.
by:
Hollie
on:
3 Mar 2010
@ 3:20 am
Thanks Jamie. I had been in need of an IE 8 hack for a while. I didn't know how to separate IE 8 from Firefox. I didn't use your versions of the IE 7 and 6 hacks, but the x:-moz-any-link worked like a charm.
To the naysayers: It's a fact that sometimes you don't have access to the source code, so you're limited to what you can do in the stylesheets. And anyway, in my experience, stylesheet hacks are WAY easier to maintain than alternate stylesheets. At least the styles are usually all grouped together.
by:
Jamie
on:
18 Sep 2009
@ 12:58 pm
In response to John and Rowan's comments, thank you for your feedback and you do both have valid points about conditional comments. They are great and are one of the best ways to make a site work in all browsers, however these are not always possible to implement.
This post was written more to help people quickly fix bugs on sites that are already built (as this is the task that sparked this blog entry, and the site in questions was not built by ireckon), and to fix for IE8 as there is not always the option to add a new conditional comment into the header for a past project, or someone else's code. Depending on how the site has been built, it is sometimes not possible to simply update the header to add conditional comments, as the site could be quite advanced and could have multiple page templates for example, which cannot be easily updated. Also, spending the time adding all the conditional comments throughout the site, and creating additional style sheets can be time consuming and not possible within a budget.
Conditional comments also have downsides to their uses:
- They add more header calls in the body of the file, which slows down sites, especially if the lag time between requests isn't great, which can be the case for international sites or those that are hosted in the US or offshore. This also is duplicated when you have an [if IE ] and an [if IE 6] for example.
- Using [if lte IE 7] also can cause some problems, in that if you need to fix a bug in IE 6 only you could technically put in a conditional comment using the above, however it would be loaded in 6 and 7, but if you used [if lte IE 7] & [if lte IE 6] they you would get double requests to the server as IE 6 would load both of these. However in this example, it would be better to use [if IE 7] & [if IE 6].
So all in all you also have to be careful of how you use conditional comments and where and how you use hacks, as hacks can sometimes be an affordable option for clients, and can also help with page load.
Personally I think starting a project with conditional comments is the way to go, even if you don't use them. But if it's only a small project or a design that you can build with limited amount of browser bugs, then hacks can be the most efficient way especially if there are only one or two hacks. This will also make it less confusing for updating the site later, as all CSS is located in one file.
by:
Rowan
on:
17 Sep 2009
@ 8:29 pm
By following the advice above you're not only hurting yourself, but anyone else who has to maintain your code.
Have you forgotten about conditional comments?
by:
John Faulds
on:
17 Sep 2009
@ 10:48 am
You're better off using conditional comments instead if you're only targetting bugs in IE browsers.
Search By Theme
- The Wondrous Wide Web (20 posts)
- Search Engine Optimisation (27 posts)
- Programming and Coding for the Web (27 posts)
- Web Design (45 posts)
- Social Media (1 posts)
- Marketing (16 posts)
- Inside Ireckon (15 posts)
- Content Management Systems (11 posts)
- Conversion Optimisation (4 posts)
- Recent Stuff (7 posts)
- Web Gadgets (2 posts)
- Daily Inspiration (1 posts)
- Darryl's Blog



by:
Jamie
on:
5 May 2010
@ 9:17 am