basically..my site works for FF3...but looks screwy with IE7... how do i make 2 separate css files for each browser?
Just add the following script to where you would usually link to the css file, then customize it to work with your files. <script type="text/javascript"> //Written by 1st Class Websites www.1stclasswebsites.com var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); if (browser=="Microsoft Internet Explorer") { //change where it says "ie.css" to your internet explorer css file document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"ie.css\">"); } else { //then change where it says "style.css" to your normal css file document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"style.css\">"); } </script> Hope this helps Joel
hey hoel, this didnt work. when i went into the source code, it didnt print the <link rel=bla bla> properly...all i see is the javascript code in the source. any idea what could be the problem?
Is it to go within static html or PHP? You can do a test (preg_match, for example) on user agent strings and serve a particular css file depending upon the browser... this also avoids unnecessary javascript. <?php if(preg_match(/blah/i, "ie7 ua")) { print("blah.css"); } else { print("blah2.css"); } ?> PHP: It's not exact, but with research and effort of the two above links you should figure it out.
hey, thanks for that. i actually found a decent way of doing this: <link rel="stylesheet" type="text/css" href="styles2.css" media="screen"/> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" media="screen"/> <![endif]--> basically i load the first CSS file...and if its IE...i replace that with another CSS file...IE reads the comments.
That's one way, but it's not going to account for specific browser version. The CSS can look different between IE6 and IE7 even (might depend on IE's mode though?). Good luck!
right. There is a way to use this method and account for specific browser versions, so I will have to test out my site on those versions. Thanks for your help
Can I just make sure that you did it right? This is what I did. I have one file named ie.css, and another named style.css I want the ie.css to only be used if the visitor is using internet explorer, and style.css to be used if they are using any other browser. So I open the page that I want this to work on, and enter the following ------------------------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Testing the css thing</title> <script type="text/javascript"> //Written by 1st Class Websites www.1stclasswebsites.com var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); if (browser=="Microsoft Internet Explorer") { //change where it says "ie.css" to your internet explorer css file document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"ie.css\">"); } else { //then change where it says "style.css" to your normal css file document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"style.css\">"); } </script> </head> <body> <h1>Just testing</h1> </body> </html> --------------------------------------------------------- Then I open ie.css and add the following code. ---------------------- h1 { color:red; } --------------------- then I open style.css and add the following code. --------------------------------------- h1 { color:blue; } --------------------------------------- It works! You can see here. http://1stclasswebsites.com/iecss/ When you look at the source it will display the script, but it still works as you can see. I hope that this solves all of your problems. Joel