Terri Swiatek Terri Swiatek - 7 months ago 42
HTML Question

Get IE8 conditional style sheet for responsive web design to work

I've created a mobile first responsive web page. It is working lovely in all the major browsers to my liking and is looking good on mobile phones and tablets too.

Last part is I want it to look decent in IE8.

I've read here on #3 (http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/) you can simply serve a specific style sheet for IE9 and lower with the desktop version styles using conditional comments.

I created ie.css with my desktop styles and have added this conditional commenting to the head section however no luck, I still get the mobile styles in IE8 and lower.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">

<title>Page Title</title>

<link rel="stylesheet" href="style.css" media="all">

<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>


Any ideas on whats going wrong? I've double checked that my ie.css file is sitting there in the directory right next to my index.html just like style.css. Is there some other reason this would not work?
Thanks,

Answer

if i read that correctly, you just want to target ie8?
first off, place html5shiv above all of your style sheets...unless you have style sheets that literally have no styles for ie. html5shiv needs be rendered first so it can tell ie those are elements and it needs to style them accordingly.
i'm still confused about what you want exactly, and not sure if you are targeting less than ie8, so lets just fix ie8 issue(s):


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="style.css" media="all">

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

EDIT
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->  
<![if !IEMobile]>   
<link rel="stylesheet" href="ie.css" media="all">
<![endif]>   

all we've done is move html5shim above all of the style sheets. then comes the style sheet for every other browser. then comes a style sheet only for ie8. then comes the style sheet for less than ie 8 and not ie mobile.
take note: i changed the version from less than 9 to less than 8, so there's no chance of cross-referencing each other, cancelling/adding styles to each other.
again, i'm not clear thats what you wanted, but this fixes the issues i see. lmk if i misunderstood something.
EDIT: looks like the mobile not (if !IEMobile) needs different syntax, so i'm assuming trying them separate will fix it. here's reference: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx