Max width not working for mobile phone

I have three style sheets, one for big browsers that aren’t IE, one for IE and one that’s supoosed to work if the max-width is 480. I’ve tried combining the two not IE statements, I’ve tried putting the css for the max width only devices into the style sheet for the Not IE browsers. So far, the only time the mobile style sheet is even called is if I take out the other <![if !IE]> statement completely (and don’t combine it either). Can anyone help me with this? I’m testing it on the Safari user agent setting and also on my Android.

<!–[if IE]>
<style>
@import url(‘innovative.css’);
</style>
<![endif]–>

<!–[if !IE]>–>
<link media=“only screen and (max-width: 480px)”
rel=“stylesheet” type=“text/css” href=“mobile.css”/>
<!–<![endif]–>

<![if !IE]>
<style type=“text/css”>
/<![CDATA[/
@import url(‘FF_innovative.css’);
/]]>/
</style>
<![endif]>

AFAIK, conditional comments are only supported by IE

So there is no “not IE” (without a version number anyway) as only IE will deal with them

All other browsers will see those as comments

Thanks for your fast response, I appreciate it. I had the Not IE coment in there for IE, I didn’t want it to show that style sheet. I found that if I don’t have that in there than IE displays it. I took out the Not IE comments around my max-width constraint

<link media=“only screen and (max-width: 480px)”
rel=“stylesheet” type=“text/css” href=“mobile.css”/>

but on my Android, it’s not working and on Safari pretending to be an iphone it isn’t working either Denver, Colorado (CO) Cosmetic Medical Spa, Innovative Aesthetics Colorado, Laser Medicine

Hi,

The conditional comments don’t look quite right and this structure is working for me.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!--[if IE]>
<style type="text/css">
body{background:red}
</style>
<![endif]-->
<!--[if !IE]>-->
<style type="text/css">
/*<![CDATA[*/
@import url('FF_innovative.css');
body{background:green}

/*]]>*/
</style>
<!--<![endif]-->
<!--[if !IE]>-->
<link media="only screen and (max-width: 480px)"
rel="stylesheet" type="text/css" href="mobile.css"/>
<style type="text/css">
@media only screen and (max-width: 480px) {
 body{background:blue}
}
</style>
<!--<![endif]-->
</head>
<body>
</body>
</html>

The above CCs are the ones that will validate and described here. Get one character wrong though and the results are unreliable.

I used the inline media query for example only to show what the mobile.css contained and is not needed.

In Firefox you get a green background unless the screen width is smaller than 480px whereupon you get a blue background.

IE gets a red background at all times.

Mobiles under 480px should get a blue background and seems to show as blue on the iphone emulator.

I’ve never seen the “downlevel” stuff before.

TBH I haven’t worried about supporting IE4 for so long I didn’t even think of it.

To echo the griping about IE6, does IE4 have any marketshare?

I guess if there’s a !IE there must be some.

Downlevel was a MS way of saying “other browsers” which seemed a littler derogatory to me at the time :slight_smile: It doesn’t mean only IE4 it means IE4 and all other non IE browsers.

It’s basically a way of giving code to all browsers except IE5+ as opposed to the normal CCs that give code only to IE.