How to use different CSS files for different browsers
February 17, 2010 | Posted by LUV | 1 CommentHas anyone ever found that your website displays differently via different browsers? For instance, when you open your website in IE, fonts are very big compared with when you open your website in Firefox. If this happens to your website, today I will give you the solution.
What you have to do is using different CSS files that are used by different browsers. For example, if your Google Analytics shows that most of your visitors view your website via IE and Firefox, you may use two CSS files. One for IE and the other for Firefox. Please follow these steps.
- Create two different CSS files : You may name the files as ie.css and firefox.css. Moreover, the names of any classes in these two CSS files have to be the same but the value can be different.
i.e. In the file, ie.css you may create the class for the main content as
.maincontent {
font-family: Arial, Helvetica, sans-serif;
color: #03C;
font-size: 16px;
}
However, if you see that with this class your main content looks too small in Firefox, you may change the font-size in the file firefox.css
.maincontent {
font-family: Arial, Helvetica, sans-serif;
color: #03C;
font-size: 22px;
}
But the class name has to be .maincontent in both ie.css and firefox.css
- Insert these lines between <head> </head>
<link rel=”stylesheet” type=”text/css” href=”firefox.css” />
<!–[if gte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
With these lines, IE will use the file ie.css to display your fonts and Firefox will use the file firefox.css. After this, you may need to adjust these two CSS files until you satisfy your fonts in IE and Firefox.
Category : Miscellaneous
Just so you know I have saved your site to my bookmarks.
I’ve seen your other blog posts too and I can say you’ve got great ideas. Keep it up!