Writing cross-browser CSS
Almost without exception, web professionals new to CSS run into problems trying to get their CSS to work as expected in all browsers. It doesn’t have to be like that though.
By reading Emil Stenström’s Cross-browser strategies for CSS and following the basic but excellent advice in the article, you will greatly reduce browser inconsistencies.
Emil’s tips are these (with my comments added):
- Validate your site. If you don’t get your HTML and CSS right, don’t be surprised when different browsers have different interpretetations of what your code should do. Also make sure that the CSS properties you use are not browser specific.
- Stay in standards mode. The requests for Microsoft to “fix the box model” in Internet Explorer would go away if everybody would make sure to force all browsers, including IE/Win, to use their standards mode. The box model is fixed in IE6. Let’s say that again: Internet Explorer 6 uses W3C’s CSS box model when it is in standards mode.
- Remove default styling of elements. Also a good idea. I used to use the Global White Space Reset trick to reset margin and padding for all element types. However, since that will also mess with browsers’ default settings for form controls, I now prefer doing that only for certain element types, much along the lines of what is described in Starting with CSS: revisited.
- Browser bugs. Like Emil says in his article, this can cause a lot of problems for somebody inexperienced with CSS. The browser that has the most serious bugs related to CSS is, as most of you know, Internet Explorer for Windows. Reading up on its various CSS bugs at places like Position is Everything is time well spent, and I recommend you start there when you need to fix a bug.
If you’re too impatient to read through all of the articles at Position is Everything, my experience from fighting IE bugs has taught me that many problems can be fixed by specifying height:1px for the troublesome element (using your preferred method of feeding that to IE 6 and lower only). If that doesn’t help, try display:inline, especially if the element is floated.
Obviously it’s better to know why you’re doing it, so I highly recommend you do some reading.
I’d like to add two more things that can help keep you out of trouble:
- Use a standards compliant browser. Avoid developing for a specific browser by using the browser that currently has the best support for CSS as your primary browser while creating the CSS (and preferably the rest of the time as well). Once you’re happy with the results, check in less compliant browsers. In practice, this means that you should use Firefox, Opera, Safari, or a browser that uses the same rendering engine as one of them during development, and then check in Internet Explorer and make any necessary workarounds.
- Keep use of CSS hacks to a minimum. Use hacks or alternative stylesheets as a last resort only. First try to find a workaround that uses the same CSS for all browsers. Some developers go about this the other way around and sprinkle CSS hacks all over their CSS files as soon as any two browsers differ in their interpretation, adding unnecessary complexity.
Keep all of this in mind and you will run into fewer inconsistencies and avoid becoming overly frustrated while learning how to create CSS-based layouts.
- Previous post: SVG support in Safari
- Next post: Bredbandsbolaget and FöreningsSparbanken - prime examples of lousy customer service
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I think another useful tip is to provide different stylesheets for different browsers.
For example, get all your CSS rules that work in a Standards Complaint browser like Firefox in one stylesheet, and supply the "fixes" to only IE via another stylesheet using IE's conditional comments.
I've never been bothered enough to put IE fixes into a different style sheet. A typical site has between 5-15 '* html' fixes for IE and I find it easier to manage when they're directly below the original style declaration.
I despair at how many people get it right in IE first and then try and 'fix it' for standards compliant browsers. The reason is usually that most people are browsing in IE, but when one considers that IE7 will probably have a better standards compliant rendering engine and IE6's is adequate it only makes sense (to me) to go for standards first.
I've recently gone back to the drawing board on the way I make CSS layouts because I was getting tired of implementing many fixes in IE conditional comments.
It mostly came down to not adding any margins or padding on my main div elements. Now I just use margins and padding on the elements within my divs and it fixes "almost" every box model issue I've had in the past.
Here's an example... For a content div, if you want 10px on each side just give the content div the total desired width of say 500px and for the inner block level elements within (p, a, h1, etc...) give them a margin left and right of 10px.
Doing it this way requires a little extra code in your CSS but it saves so many cross-browser headaches especially box-model issues with IE5.
Later days, Kenneth
I'd like to add: the better you know the enemy, the better you'll fight it. So, this is my recommended reading: On having layout
I usually have the conditional comments at the bottom of my main rules too, only when I'm completely finished do I move them into their own stylesheet.
Matt, I think 5-15 fixes times the number of pages you have would add up to enough to justify a separate stylesheet for only IE users. And you should probably stop using hacks.
Better stop feeding 'height: 1px' as a general bug-fixer for IE win. That fix will mess up rendering in IE7 really bad - unless that browser is kept in 'quirks mode' by adding some trickery to the source code, or by giving it a separate stylesheet.
Knowing your enemy is important - and then only fight (hack) him when absolutely necessary. Designing for the web instead of for "something else" goes a long way.
Georg: Yes, "height:1px" and other IE tricks should be hidden from IE7.
I allways try to find the compromise... if something does not work in most browsers, I simply find another way to do it... well, sometimes that's not possible, but I try not to put information ( content ) bellow the design.
Also remember IE6 does not recognize the !important modifier, so if something does not work in IE6 (e.g. the padding is messed up) but works fine in other browsers, do this:
#SomeDiv { padding: 10px !important; padding: 5px; }All other modern browsers will use the first declaration and ignore the second one; IE6 will reset the padding to the second declaration.
This is a good 'hack' because if IE7 fixes inconsistencies and also starts recognizing !important, you won't have to go back and undo the hack (unlike some of the others out there).
Two nice additions there Roger. Aspecially the first one is something many beginners need help realising. They start with IE, get it right and then wonder why things look broken... sigh
I usually have the most problems with the FF/Opera/Safari inconsistencies. There's no good ways of giving them different styles (except for ugly hacks) and browser sniffing feels dirty. In those cases I often end up rethinking my boxes, something that often fixes things.
Lastly: who's that "Erik" guy in the point four? ;)
These guidelines can really reduce a lot of problems. I haven't had to use that many hacks for Internet Explorer since I started removing the default styling of elements.
I'm starting to put all IE-specific CSS in a separate style sheet and using conditional comments. Since IE's problems are IE's fault, it gets the extra file. Why punish other browsers for IE's mistakes?
I agree with the global whitespace reset technique, and use it frequently. Clean slate -- you know where you stand.
Also, for those that are interested in the state of CSS in IE7, css-discuss has a Wiki going on this topic:
http://css-discuss.incutio.com/?page=IE7
2 sites I highly recommend:
cross-browser CSS tests and solutions
http://brunildo.org/test/index.html
the bugreport: browser JS/CSS bugs
http://www.quirksmode.org/bugreports/index.html
If you set the DOCTYPE 'transistional' will the browsers render in Quirks mode or in Standards mode ? I'm bit confused
Nice article Roger and a good outline. Yes start with validation and standards compliance and remove default styling. I'm going to have to revisit some height 1px fixes I have laying around...
of course I'm a bit half eye in the sun with IE7 being in BETA. Molly mentioned they're fixing the !important thing for instance. It would be nice if the final IE7 acted like FF on the 1px... but I'm probably dreaming.
I had a marketing exam this morning and my head is mush so this comment may just be babble.
@LakTEK: Transitional makes it render in quirks mode. There's one exception and that's IE5 which will render in standards mode if you supply an URL. That's one of the reasons it's always better to go with strict right away.
I wish IE7 never gets shipped.
Emil: Oops. Embarrassing typo, that. All fixed now.
You are right that the box model had been fixed in IE6 in strict mode. Alas the XML prolog bug prevents XHTML pages to go into strict mode, so XHTML pages in IE6 are always rendered in quirks mode with the screwed box model!
I only found out about it recently. Argggghhhhh! Must ... kill ... IE developers!
I am perpetually amazed at how many people don't realize the box model is fixed in standards mode IE6. I haven't used a box model hack in probably a year and a half! Really the only IE issues that crop up for me these days are mostly margin/padding and positioning inconsistencies.
I haven't had a chance to play around too much in IE7, but it appears things are at least getting better.
Um, if margin/padding doesn't work, then what does "the box model is fixed" mean?
The fact that margins/padding/borders aren't drawn right IS what is broken about the box model!
Why isn't the IE 'hack' with !important used more widely to fix paddings etc in IE?
As Mr. Cahill said:
Or have I just missed it completely?
Many others can be fixed by specifying position: relative; Don't ask me why.
Only if you're writing seperate CSS rules in your stylesheet for every page on the site. Surely most rules, and whatever "hacks" you add to them, will apply to every page. Writing a conditinal comment and extra <link> on every page on the site is a PITA in my view - I'd rather write a half-dozen * html's and keep everything in one file.
On which browsers is this true? All the ones I use - IE, FF, Opera - render transitional markup either in standards mode or "almost standards" mode (which differs from standards only in calculating line-height slightly differently in some circumstances). I don't know any which switch into quirks.
Only if you use an XML prolog. It's optional for all XML documents, including XHTML documents, so just miss it out altogether and your XHTML pages will be rendered properly.
@Chris Hunt: HTML Transitional => quirks mode. XHTML Transitional => standards mode.
Yes we need test our design in major browser such Firefox, IE, Safari etc
@Emil: "HTML Transitional => quirks mode" On which browser? Not Firefox or IE6 (I don't have others to hand right now).
My own experiments, and references I've found, agree that provided you specify a full doctype - including the dtd URL - you'll get rendered in {almost} standards mode. If you have evidence to the contrary, let's hear it.
I've been going with CSS for just under two years now and having started off using a lot of hacks and having a lot of frustrations, these days my CSS is hack free and working pretty well (dont look at my site as I havent bothered to take out the hacks as I'll be re-doing it for May's Reboot anyway).
My advice is definitely to zero everything using the Global whitespace reset as advised above - and validate, validate, validate. With study and experimentation, eventually you'll find that there are hack-free techniques to cross-browser compatibility.
Just small tips like display:inline when floating etc will save massive headaches and frustrations. Pay attention and subsribe to some good blogs and css sites - most of the works been figured out by people much smarter than me!
I think the MOST IMPORTANT thing is to, as you said, make sure your code validates. When some people ask what's wrong with their code and then they try to validate it, im not surprised that they find > 20 errors.
Hand downs, validate at all costs.
Hello everyone,
it is obvious how important it is to develop cross-browser and standards compliant websites.
But down to what level (...that is browser)?
Is it realistic to say that we still need to check our websites for IE 5 or 5.5?
What is your opinion on that?
I have a question, how many of you would make a crossbrowser css knowing that your target audience only use IE/WIN ? Given that you are working on an Intranet web application.
Fotis: All websites should work in older browsers. That does not necessarily mean that they will look the same.
sim: I would, regardless of which browser the target audience is using.
A question related to Fotis' question: If I want to make sure my web page looks good in, say, IE5, how do I do that?
I know I can always read up on IE5's behavior, but if I would actually like to see the page rendered in that special browser? Not many of us have old versions of IE installed.
Well Toffe, you could try running a standalone version of IE5, which you can find in http://browsers.evolt.org/?ie/32bit/standalone (just run the exe!). And perhaps you might ask how your websites would look in the forthcoming IE7, so you can check out this great tutorial from Sitepoint at http://www.sitepoint.com/blogs/2006/02/12/standalone-ie7-the-fix/.
If you also want to check out how it would look in Safari, you can always sign up at cosmopod for a free online desktop linux and use KHTML that has the same rendering engine as Safari does!
Hope I was helpful!
Fotis, thank you, that was extremely helpful!
Hi, That was quite helpful tip.
Thanks.
hi, thats quite helpful for me.
Sorry, comments are closed for this post.