CODEWITHSUNDEEP
htmlcssinternet-explorer
schenker
schenker

Reputation: 953

Can I create a separate stylesheet for IE?

I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?

  1. Create a style sheet just for IE?
  2. Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?

To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?

Thanks!

Upvotes: 2

Views: 1911

Answers (5)

Nick Fury
Nick Fury

Reputation: 1313

There are a couple things you can do.

Example of a conditional comment to target all versions of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

  • Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.

Upvotes: 3

Daniel Toillion
Daniel Toillion

Reputation: 48

In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/

Also consider using a template like http://www.99lime.com or similar.

Upvotes: 1

Dips
Dips

Reputation: 3290

You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.

For all IE

<!--[if IE]>
For all IE
<![endif]-->

If you just want to target to specific version of IE then

<!--[if IE 7]>
For only IE 7
<![endif]-->

Upvotes: 3

Dai
Dai

Reputation: 155105

Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.

If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:

<!--[if IE 6]> <link rel="stylesheet" href="ie6patch.css" /> <![endif]-->

Read more here: http://www.quirksmode.org/css/condcom.html

Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.

Upvotes: 1

Dan
Dan

Reputation: 379

Check out conditional comments.

Upvotes: 0

Related Questions