IE specific style sheet
I'm trying to force my html document to load two different CSS style sheets. One for browsers other than IE, and one just for IE. I checked archived threads relating this issue, nothing helped. So i decided to write my own, hopefully this might help me get things right.
My html code (testcss.html) looks like this:
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="ie.css" rel="stylesheet" type="text/css" />
Your text goes here.
My document style.css is very simple, and has two selectors only:
Same goes for IE specific stylesheet (ie.css):
Thing is, I am using FF22.0 and IE 10 for testing. They keep following one or the other style sheet, instead loading separate ones. If I remove one dash from comment, ie.css is being loaded, if comment remains intact, style.css is being loaded in both browsers. This is kinda driving me nuts, so I'd be grateful for any help with this issue.
Thanks in advance!
Of course style.css is loaded in IE, too, because you didn’t specify any condition. The typical use case is that you have a default stylesheet for all browsers and then override certain styles in the IE stylesheet (which should actually happen in your example – both browsers get blue background with white text while IE overrides the background color so it’s red instead).
You're absolutely right about this. Though, it turned out this paradigm with two different CSS files does work with IE10... BUT only when I mess around with Compatibility Mode (F12). From 9 to 7 also, all simulated versions respond to alternative IE CSS file. Also checked on my laptop, where I still have genuine IE8 installed. Same thing, it works.
Originally Posted by VIPStephan
I'd call it a day on this one, thanks guys for responding. I learned something useful today.