I'd like to use different CSS for different browsers. More specifically, I want to use a certain CSS for all browsers expect for IE, and for IE, I want to use a different CSS. I currently have the following code: <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if gt IE 5]> <link href="style-ie.css" rel="stylesheet" type="text/css" /> <![endif]--> Code (markup): Seems to work fine, but I'm not so sure if this is the best way to go about this. How can I use different CSS for different browsers? What's the best way to do this?
That's generally as good a way as any, with a small exception. Make that lte ie 7. IE8 is supposed to be a modern browser, as opposed to IE≤7 which are all pretty bad. If you code to standards, there will be only small tweaks required for IE. So, don't do a separate stylesheet, but just add a few variations. cheers, gary
Its more than likely a small problem in your css, however if you can't figure it out ie hacks are the best alternative.
Well, I'd look at the reason for the different code. If something is completely different between the browsers, the conditional comments are fine (except you'll need that reference on every single HTML page... bleh) so long as you realise you'll need to edit every single CSS sheet whenever you change something, losing some of the advantage of a CSS sheet controlling all pages. Now you have two. If it's lots of little misalignments (not counting IE5.5 and below), then better understanding of CSS and a few well-placed * html comments can get you through better. For IE5.5, I'd say that depends on how many changes are needed-- if one or two, the Tan Hack might be more worth the time, but if it's completely different, then instead of your CSS filled to the brim with w/idth hacks, give it the conditional stylesheet instead. There is another way to have completely different designs for lte IE6 and the modern browsers... check out Egor Kloos' page at CSS Zengarden: http://www.csszengarden.com/?cssfile=062/062.css I've imitated it, and it's just bloaty code, but I didn't care here: http://stommepoes.nl/Guis/guis.html (only a basic template, not a working site). The old design (currently online as their site) of my company remains for IE6 and below, a sort of nostalgia browser : ) using the attribute selector which IE6 and below doesn't understand. The single advantage to this is a single CSS sheet for the different browsers. That's about its ONLY advantage, as it's about twice as much code in that single sheet. I just personally like a single fat CSS sheet to be loaded than mulitple ones, since I'd need to edit more than one stylesheet at a time plus less server-loading time.
Good Answer Stomme.. the best method mate is to look closely at your css and xhtml and see why you actually need to target different browsers (box model problems, default padding,margin issues, list issues) usually the issues can be resolved without the need for separate css files. if the issues can not be resolved then by all means use the if statement to target different versions of IE - thats the method to use and not inline hacks
Hi there, 1st post, so please forgive me if I mess up the manner in which the post is input. I have a site which needs additional CSS for less than IE7 due to the need to fix an image to the bottom of the viewport as a kind of navigation. IE6 and below do not support: position: fixed; and I wanted to remove this image from the structure of the site by having a separate CSS for IE versions which won't display this correctly. Can you think of how I ought to do this? I was thinking of using: html > body #footer to hide #footer from <IE6 HOWEVER I need to add a new navigation for <IE6 and was thinking that if I used: * html #ie6_nav this would create a new #ie6_nav that would not appear in >IE6 which I could use as the nav for older browsers. Any ideas. Should I go for commented separate CSS files or should I just hack away at hiding and revealing specific parts of one CSS file? God, does that make sense. It is late and I am tired, I hope that it does. SORRY!
Position:fixed is usually made of /FAIL/ from a layout perspective in the first place, and is rarely a good idea on ANY browser. Should you REALLY need that behavior, there is a 'trick' version you can send to all browsers. Set html and body to height:100% and overflow:hidden. Then absolute position your elements that would be 'fixed', then create a div wrapping your normal page content that is set to overflow:auto; - which will give you your scrollbars for non-fixed content. Works in every browser without the hassle of targeting each specifically in turn. 99.99% of the time when people are sending different versions to different browsers it's because they are using a technique that is either badly thought out, or attempting to implement a functionality that doesn't exist everywhere or has an inconsistant implementation. Though if you have a full code example and/or URL we could probably tell you a better way of handling things. As a rule I dislike IE's conditional comments just because it goes in the HTML - I'd rather have CSS that doesn't validate from proprietary properties than separate out browser specific stylings and bloating out the (uncached) markup - both because of the extra handshake and the pain in the ass of debugging multiple files for single elements.