Tags: Uncategorized
Two CSS hacks for identical pages on FF, IE6 & IE7
If you have been coding in CSS for any amount of time then you will have inevitably run into a situation where your CSS styled page looks great in one browser, but something is broken in another. Between Firefox, Internet Explorer 6 and Internet Explorer 7 there are a variety of slight differences in CSS implementation that generally means that nothing looks the same on any of the browsers except for the most primitive layouts.
There is however a simple solution: by employing just two CSS hacks we can eliminate 99% of all CSS differences between the major browsers!
Step 1 - Design for Firefox
The jury is still out about how popular Firefox is or isn’t, but the simple fact remains that Firefox - along with Opera - is one of the most “compliant” browsers as far as CSS use goes. As such we are going to design our page for Firefox first on the assumption that Firefox (and Opera!) are the “pure” browsers, and then patch up the bugs for IE6 and 7.
So off you go! Get designing and come back to step 2 once you have done enough of the design to get to the point where you want to see how things are shaping up in IE 6 and 7.
Step 2 - Use the “* html” hack for Internet Explorer 6
Now that you have done some design in Firefox and loaded it up in IE6, chances are something is broken. This is where the first of our two hacks come in.
Identify the CSS statement that is styling the broken element - in my experience, most of the differences come down to the different ways that IE deals with margins and padding. Having found the offending statement, copy it and place it after itself, but with a “* html” prefix to the selector, for example if there was a problem with the margins for your MyDiv DIV you’d get something like this:
#MyDiv {
margin : 10px 10px 10px 10px;
}
/* IE6 Only */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}
Firefox will ignore the * html selector and so keep its 10px margin, but IE6 will see it and use it, thus setting the margin to 5px.
Step 3 - Use the “*:first-child+html” hack for Internet Explorer 7
In a similar manner to Step 2, we simply copy the selector and add “*:first-child+html” to the selector to make it visible only to IE7. Doing so would give us the following CSS:
#MyDiv {
margin : 10px 10px 10px 10px;
}
/* IE6 Only */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}
/* IE7 Only */
*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}
So, as before, Firefox and IE6 will get separate margin values, but now IE7 will get a 3rd and different value of 2px - note that neither Firefox nor IE6 can “see” this 3rd rule.
Finishing Off
Having used these two CSS hacks we can now specify IE6- and IE7-only CSS styles within the same style sheet, eliminating the need for clunky browser detection mechanisms or extra style sheets, allowing you to tweak your styles perfectly for Firefox and IE6 and 7 without having to compromise on your design.
Just go through these 3 steps as many times as you need for each design to maintain a consistent appearance - I personally find that comparing the output in all 3 browsers at regular points throughout the design process is better than trying to reconcile the differences all at once after you have “finished” the design!
I’ve only shown the technique on a single DIV, but there is nothing to stop you taking these hacks further and using them multiple times in the same style sheet - just make sure you follow the ordering shown here!
Feb 15th 2007
this doesnt really seem to help any of the floating issues that occur between browsers. if you have an suggestions for those kind of issues that would be really helpful
Feb 16th 2007
The “*:first-child html” hack for IE7 seems like a particularly bad idea. While IE7 has its share of flaws, it does a remarkably better job at approximating standards-compliance than IE6 ever did. You really shouldn’t need to be adding any additional “hacks” for IE7. You should just use well-formed CSS to begin with during Step 1, and Step 3 will vanish. If all else fails, just make sure you’re specifying padding and margins on whatever you can, rather than assuming the defaults will be shared across multiple browsers. You’d be surprised at how many problems that alone can fix.
There are very few instances I have seen where the use of an IE7 hack is truly justified. Usually hacks like that are done because the programmer was too lazy to figure out where they messed up with their original CSS. IE6 hacks I understand completely, but you’ll find that with a little extra effort, you can make it work in IE7 as well as others without having to do any “hacks.”
And my opinion on using the “* html” hack for IE6: that’s fine, but in practice it might be better to just create a second CSS file, and include it with IE’s conditional comment tags. That way, a few years from now, when it’s finally safe to assume that no one is using IE6 anymore, you can just remove it in one fell swoop. Por ejemplo:
Feb 16th 2007
Its a fair point Gordon, and certainly applicable if you are making a new site from scratch today.
However, where I envisaged this approach being most useful was for maintenance of existing designs and templates - I cant have been the only person to have looked at an older design that was perfect in Firefox and IE6 only to discover that it has gone bananas in IE7!
Often in these cases you just want a “quick and dirty” fix to get things appearing in IE7 without having to “rock the boat” as it were with regards to the design in the other browsers.
Apr 3rd 2007
Thanks for this article. Of course it’s best to avoid using these tricks whenever possible but sometimes one has no choice. Until Microsoft pulls its head out, we’ll have to put up with these headaches.
May 11th 2007
If you’re referring to the double width float issue with IE6, there is a somewhat solution.
When you float a block level item, add:
display: inline;
and see if the float doesn’t act as it should.
Peace
May 22nd 2007
Why not use conditional comments? It keeps CSS cleaner and you can split up your stylesheets. It also keeps your stylesheets forward compatible so you won’t have to go back and re-edit all of your hacks once a standards-compliant IE comes around that is susceptible to one or two of the old hacks.
Jul 18th 2007
This is great article and is one that I frequently reference. Of course, there are many ways to differentiate browser behavior, but this article describes more of the browser’s handling differences than offering you a guiding principle for writing CSS’s.
Thanks for the hack, it works and can be used to reduce the codebase while at the same time being efficient for either FF, or IE.
Kudos,
Allen
Jul 23rd 2007
Hey,
I think this is a brilliant idea for those not familiar with PHP or other server-side browser detection.However I prefer to use PHP browser detection to include an seperate stylesheet for IE (upto 6) and then another on top of that for IE7 if needed.
This means that each browser is asked to read only the data that applies to it, saving on download time, bandwidth and rendering times.
Jul 25th 2007
Umm… Right, save them bits! it might cost you 0.0001 we can’t have that.
Jul 25th 2007
Or we can spend $1,000 in time and research to do it right, all the while programming on a browser that has a 10% market vs a browser that covers only 90%+ of all users.
But remember FireFox uses “standards”.
Aug 1st 2007
I have created a three column design.. view is ditto same in FF and IE7 but in IE6 column move down below.. while searching on google i found that i need to use different css file for IE6. I think this method is good if it work fine instead of creating new file.. columns are separated using fload and padding and margins..
Feb 26th 2008
thank u very much,, these ie7 css hack is really a good help to us..
Feb 28th 2008
And for OPERA since one becomes?
Feb 28th 2008
Regarding Opera, I took the attitude that a functional layout in Firefox, is very likely to look largely the same in Opera.
Of course this is not always the case, but in my experience there are a lot, lot, lot more problems with IE!
Mar 11th 2008
Wow, very good hack for IE7, thanks!
Mar 31st 2008
Thanks, you saved my day (and probably from going insane).
Apr 1st 2008
Lee said: “Or we can spend $1,000 in time and research to do it right, all the while programming on a browser that has a 10% market vs a browser that covers only 90%+ of all users.
But remember FireFox uses ’standards’. ”
I can’t recall what IE6’s market share was in July of 2007, but here in April of 2008, IE6 has about a 30% share, IE7 has about a 23% share, and FireFox has about 36% share. FF and IE&’s percentage is growing, and IE6’s share is declining.
The moral to this story is: Code for the browser(s) of the present and the future, because eventually, the browsers of the past will be gone.
Apr 17th 2008
@Kevin
Not a chance them figures are correct….
But saying that… FF is growing daily.
Apr 24th 2008
“Not a chance them figures are correct….”
http://www.w3schools.com/browsers/browsers_stats.asp
According to the stats on the page listed above, they aren’t that far off.