Question

I’m using the following which is not working in IE7.

<!-- styles to use for small screens, such as phones -->
<link rel="stylesheet" media="screen and (max-width:480px)" href="phone.css">

<!-- styles to use for medium screens, such as tablets -->
<link rel="stylesheet" media="screen and (min-width:481px) and (max-width:800px)" href="tablet.css">

<!-- styles to use for larger screens, such as desktops and laptops -->
<link rel="stylesheet" media="screen and (min-width:801px)" href="styles.css">

I would like to know why this doesn’t work in IE7?
Is there a way to do this all in one style sheet…that will work in IE?

Thanks

I ended up doing it this way so that it drives IE8 (and below) directly to my standard style sheet:

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

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

<!-- styles to use for small screens, such as phones -->
<link rel="stylesheet" media="screen and (max-width:480px)" href="phone.css">

<!-- styles to use for medium screens, such as tablets -->
<link rel="stylesheet" media="screen and (min-width:481px) and (max-width:800px)" href="tablet.css">

<!-- styles to use for larger screens, such as desktops and laptops -->
<link rel="stylesheet" media="screen and (min-width:801px)" href="styles.css">

Answer 1

You can set parts of you css code to be browser-specific.

This page contains information on how to do this!