changing CSS on Browser type

hargi · 20 Dec 2006 at 09:21

Hi
Got this code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Test</title>
		<link href="all_browsers.css" rel="stylesheet" type="text/css">
		<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
		<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
	</head>
	<body>
		<p>Test</p>
	</body>
</html>

How do i addapt that to say If internet explorer 6 or below use old.css
else use new.css
I take it i put that in the head of all my html pages.

Augmented · 20 Dec 2006 at 09:30

You can use greater than, as well as less than. Or alternatively use NOT. So,

Code:

<!--[if gt IE 6]>All IE versions above IE6 read this <![endif]-->
<!--[if lte IE 6]>All IE versions below and including IE6 read this <![endif]-->

<!--[if IE 6]>Only IE6 read this <![endif]-->
<!--[if !IE 6]>All IE versions except IE6 read this <![endif]-->

HTH

.

hargi · 20 Dec 2006 at 09:46

thanks

hargi · 10 Jan 2007 at 14:44

just revisiting this is there sintax avalible to check if the user is using opera, firefox, safari and netscape or is it just limited to IE and not IE

TerraS · 10 Jan 2007 at 18:18

hargi said:
just revisiting this is there sintax avalible to check if the user is using opera, firefox, safari and netscape or is it just limited to IE and not IE

They are IE specific - in other words, only IE understands this kind of conditional syntax.

You shouldn't need to use this if your HTML is cross-browser (the ideal scenario), but in the real world on big systems this is an acceptable way of keeping IE hacks together.

You should not have all of the CSS duplicated in this file though - just keep it for IE specific CSS.