CSS Styles Not Being Loaded in Ie8

CSS styles not being loaded in IE8

@Guffa put me onto the right track with this: the problem is that the HTML5 elements aren't working in Internet Explorer 8 and lower.

Modernizr would fix this, but: http://www.modernizr.com/docs/#installing

Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.

So, you simply need to move Modernizr from just before </body> to inside the <head> element.

CSS works in IE11 but not in IE8

there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.

div {
  border: 2px solid #aaa; /* for all browsers */
  border: 2px solid #f009; /* IE8 and below - red border */
}

.element {
    margin-bottom: 20px;
    margin-bottom: 10px\9; /* IE8 */
}

2) using conditional statements from within your HTML :

 <!--[if lte IE 9]>
  Your IE8 and below HTML code here.
  Perhaps importing a specific style sheet.
<![endif]-->

e.g :

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]>     <html class="ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

styles :

.element {
    margin-bottom: 20px;
}

.ie7 .element {
    margin-bottom: 10px;
}

.ie8 .element {
    margin-bottom: 15px;
}

CSS wont load on IE8

IE 8 and below only responds to screen and print in the media property.

Change this:

<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />

to this:

<link rel="stylesheet" media="screen" href="mobile.css" />

And add the media queries in your CSS file(s):

@media screen and (max-width: 400px) {
  body { 
    ...
  }
  ..
}

Respond.js, as others have noted, should help with compatibility.

Why are my print styles not being rendered in IE 7 and IE 8?

Turns out, the problem was that HTML5 elements weren't rendering on print properly, and the HTML5 shiv doesn't support printing by default.

Luckily for me(and you), there's an IE print protection plugin made by Alexander Farkas over here: https://github.com/aFarkas/html5shiv

EDIT:

Looks like Modernizr now has a print shiv option if you're using Modernizr for all your shiv-ing (totally a word) needs: http://modernizr.com/download/

Almost all of bootstrap styling not working in IE8. Works fine in chrome and firefox

Ok, so I figured it out. Wow this is really stupid. Apparently I was running IE in quirks mode.. This is what happens when you let a mac guy mess around in windows. Anyway, thanks for the feedback.

CSS rules are simply not applied in Internet Explorer. Where should I look for more info?

Just on a lark, try removing all the imports then putting them back in one by one.
Run your CSS through the W3C CSS Validator.
Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.

My CSS is not loading in Internet Explorer 11 and Firefox! Only works with Chrome

Solved by using type="text/css" instead of type="css/stylesheet" when importing the stylesheet.

CSS Styles Not Being Loaded in Ie8