2

I spent a good amount of time making a website look good, working with Google Chrome and Firefox, however as is often the case, when I look at it in Internet Explorer it looks worse than it did at the start. I believe there is a way to have an IE only css file, however I don't recall how to do it. Can you point me in the right direction.

Also I would like to know if there is a way to have 

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

work for IE. I looked into this years ago and I think the only option then was to have images create the radius. Hopefully there is something new that works (the simpler the better). The border radius is just one of the many things that render differently now that I changed the css.

Thanks

Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
Garrett Fogerlie
  • 4,450
  • 3
  • 37
  • 56
  • 1
    You have two completely separate questions right there. – Chris Aug 18 '12 at 15:24
  • I know, my main question is the first one, I was just being lazy and wanted to know if there was a work around for `border-radius`. It didn't seem worthy of a question on its own. – Garrett Fogerlie Aug 18 '12 at 15:32
  • what version of IE? (I'm guessing IE8 because IE9 does support border-radius, but please please specify; it makes a big difference) – Spudley Aug 18 '12 at 16:39
  • @Spudley, IE 6 and up. I thought I tested it on IE 9 but apparently not. However the office the site is for only has IE 6 installed on their systems for whatever reason. – Garrett Fogerlie Aug 18 '12 at 16:43
  • gosh. Another IE6 using office. You need to have a serious talk with them. When IE6 support finally ends in a year or so, anyone still using it is going to get hacked to pieces. – Spudley Aug 18 '12 at 16:47

4 Answers4

4

Answer to your first question: to include a stylesheet file in IE only, wrap your <link>ing with a conditional comment. Here's an example on how to do it:

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

Answer to your second question older versions of IE do not support border-radius. IE9 does support it, though. There's no workaround other than to use images or third-party plugins like jQuery corner.

Chris
  • 26,544
  • 5
  • 58
  • 71
1

Internet Explorer 9 and higher versions support border-radius. Lower versions do not support this. You can

Ibrahim ULUDAG
  • 450
  • 3
  • 9
  • +1 thanks for quickly answering my second question. It looks like those are the only answers for IE. Its kinda sad that IE is that far behind, especially since many people still use it. – Garrett Fogerlie Aug 18 '12 at 16:40
1

Your are looking for Conditional stylesheets vs. CSS hacks and one I had to dig out from the very bottom: PIE CSS3 decorations for IExplorer.

aefxx
  • 24,835
  • 6
  • 45
  • 55
1

IE-specific CSS:

  1. Use Modernizr to determine which features are available in the user's browser. This will add classes to the <body> tag, which you can then reference in your stylesheet, to activate certain styles if a given feature is or isn't there.

  2. Use Conditional comments to include an IE-specific stylesheet.

  3. Use an IE CSS hack, like the ones described here: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

Border radius:

This is supported by IE9, so you must be using IE8 or earlier (or a compatibility mode).

  1. Ignore it for uses of older IEs. It's not worth the effort to support them for a feature that doesn't actually affect the usability of the site.

  2. Use CSS3Pie to hack in the border-radius feature into IE. It's a hack, but it works quite well (better than some others that are being recommended here).

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • It loads Modernizer, however I have never done anything more than just reference it. Actually I never even looked into what it was for. Is it IE only or does it do the same for other browsers? Can you provide a link to a tutorial on it (don't go out of your way, I'm sure I can find tons via google) Thanks. Also, IE 9 in compatibility mode won't render new features, that sucks. – Garrett Fogerlie Aug 18 '12 at 16:48
  • 1
    Modernizr does feature detection on the user's browser for a range of features and makes the results of those tests available to both CSS (via classes in the body tag as described) and JS (via an object with flags for each test). So you can then write your CSS and JS to adapt according to what the browser is capable of. Of course, this mostly affects IE users, but there are features that may only be in the latest browser. It's generally better to do feature detection than browser detection, because it means you don't have to keep changing your code every time a new browser version is released. – Spudley Aug 18 '12 at 17:03
  • Very good point, thanks. I will make this my common practice. – Garrett Fogerlie Aug 18 '12 at 17:06