How to load separate css files for different browsers

You should have just cancelled out the left position with left:0 in the IE7 stylesheet and nothing else.

Now go and tidy up the rest. Paul- Thank you for claryfiying how that I only need to include what needed to be changed. The conditional statements were just in there for testing purposes at this point. Thanks for clarifying. Placing your main standards-compliant style sheet and the browser-specific style sheets in different external files allow you to simply remove a particular file in the future should that version of the browser cease to be used.

Even when you have validated your CSS code , you should still test your code manually using different browsers. There is no substitute for this: just because your code is standards-compliant does not mean that the browser will render it the way you want it to. That article will also show you how you can do this even if you don't have an appropriate operating system for that particular browser. One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 5.

Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on the version. The extensions, called "conditional comments", only work for those versions of IE and none other. Specifically, they do not work on IE 10 and later, which behave just like other browsers in ignoring those conditional comments.

To cause say a CSS file like "iespecific. This applies to all the examples in this article. Detecting minor versions of IE 5 is a bit more tricky. The moment you specify a minor version, you are expected to get the whole version number correct. For example, to detect the release build of IE 5. The test will fail if your visitor has a version of IE 5. To make life easier for webmasters who need to test for a whole range of IE versions, you can use the comparison operators "lt" less than , "lte" less than or equal , "gt" greater than , and "gte" greater than or equal.

For example, to test for all versions of IE that support the conditional comments greater than or equal to version 6, you can use. IE 5 to IE 9 will however attempt to parse the block to see if it has instructions specific to it. As mentioned before, IE 10 will behave like a normal browser and ignore the comment. You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.

Notice the "! This is the "NOT" operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser. Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 to Update: The information in this box applies to old browsers that are no longer in use today, and as such, can be ignored. Many web designers find it simpler to design the site from the ground using CSS, rather than finding ways to reproduce old layouts into CSS — even for pre-existing sites.

In addition, beginning CSS design from scratch will allow you greater functionality that older layouts did not allow. You can therefore take full advantage of all possibilities.

From there, you can add the go-arounds to render the code usable for non-compliant versions like IE7 and IE6. When they stop being used altogether, you will just need to remove the workarounds that you had developed for them.

If you start by writing your principal CSS sheet for non-standardized browsers, you will need to rewrite it once they become obsolete. Test out your CSS on at least three modern browsers, choosing those whose display technologies are completely different from each other. Konqueror, Opera 12 and later, Safari and Chrome use the same rendering engine.

A useful way to handle browser-specific omissions and bugs is to have the standards-compliant style sheet in an external sheet, which each browser loads.

In CSS, the last style defined overrides earlier definitions. When you externally place the main style sheet, you are easily able to remove segments applying to browsers no longer in use or you can take help from www.

Even if your CSS code has been validated, manual testing for different browsers is a must. The fact that you have written your code in a standards-compliant way is no assurance that it will not render exactly the way you want on every browser.

Javascript is very good for browser selection. Just use the browser detection to point to a different css file.

If you choose the server side way, you would have to parse the User-Agent header and add the valid CSS from that parsing. I advise you not to do that because User-Agent parsing is a tedious task and there is more elegant way to deal with browser quirks. Worth to be noted that if you are interested only adding special CSS rules files for Internet explorer there is a special syntax:.

Also please note there is some CSS framework to avoid to have per browser rules. The biggest one in my opinion is probably YUI 3 Grid. This would give you the same look and feels on all browsers if used properly.

This technique is powerful because you can detect virtually any browser and based on this you can include or print, to be precise any required. The advantage of this technique is that it occurs earliest, even before the page starts getting sent to user and you can detect browser version very exactly. But the a code analyzing values of this variables should be used, like in this example.

See this quirksmode article for more information. For other browsers, you'd have to either use JavaScript or server-side detect which browser the visitor is using, and depending on the result, include the suitable CSS file.

Another great article on quirksmode about that here. Almost everything is possible to do with the same style sheet for all browsers. It requires a bit more work for making a clean markup and using robust styles, but what you gain is not just fewer css files, but a page that is very likely to work also in browsers that you have never heard of, and future versions of the browsers. Also a well thought out markup makes the page accessible for blind surfers, and it makes the job easier for search engines so that they are likely to index more of your content.

That is what I have used on our company's web site.