
April 17th, 2003, 10:33 AM
|
|
|
There are a couple of ways that you can use different CSS for different browsers.
Create a simple CSS that Netscape will display correctly.
link it by using
Code:
<link href="simple.css" rel="stylesheet" type="text/css" />
You can then import an advanced CSS for use with IE, Moz etc.
Code:
<style type="text/css">
<!--
@import url("advanced.css");
-->
</style>
NS4 does not support @import so will not load the advanced file.
Another way would be to use Javascript Browser Detection to load different CSS.
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var isNS4 = ((navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Gecko") == -1));
var isNS6 = ((navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Gecko") != -1));
var isOpera = navigator.userAgent.indexOf("Opera") != -1;
var isIE = navigator.userAgent.indexOf("MSIE") != -1 && !isOpera
if (isNS4) {
css = 'simple.css'
}
else {
css = 'advanced.css'
}
document.write('<link href="' + css + '" rel="stylesheet" type="text/css" />');
</script>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
|