While trying to configure the new theme for Simply-Basic.com I ran into a common problem among web designers: not all browsers are created equal. The one most easily coded for, of course, is Mozilla Firefox. I found that Opera was also easily done. But Internet Explorer is notorious for interpreting standard code in an interesting manner, to say the least. Luckily, I came across a quick and easy fix that works for almost any browser you’ll need. It’s called “CSS Browser Selector”. It uses javascript, but if your visitors don’t have it enabled by now, they should be used to missing out on quite a few things.
Hacking your CSS is probably more effective and versatile in its usage, but this can often be difficult for those with out extensive CSS and HTML knowledge. I think this javascript code is a great alternative to those like me who don’t have the time or knowledge to hack your CSS code your self.
CSS Browser Selector
Tutorial presented by Simply-Basic.com
Coded by Rafael Lima
URL: http://rafael.adm.br/css_browser_selector
Download: Click here After downloading, change the extension of the file from .js.txt to .js
CSS Browser Selector is a very lightweight javascript code that gives you the ability to write browser specific CSS right in your main CSS document. How does this work? This snippet of code adds a pseudo CSS class that is browser (or operating system) specific automatically to the users web browser. The author explains installation fairly good on his website, but I’ve included detailed instructions and an example here if you need it.
Installation and Usage
Setting up the code is nice and easy. Download the javascript from the link I provided above. Don’t forget to change the extension on the file from “.js.txt” to simply “.js”, excluding the quotation marks. Then upload the script to your web server and add the following script somewhere between the <head></head> tags of your web document. Of course, be sure to change http://yourpath.com/... to the actual location of the script on your server.
Code:
1 | <script src="http://yourpath.com/css_browser_selector.js" type="text/javascript"></script> |
Now you are ready to incorporate the script into your CSS code. The javascript checks the browser and operating system of the visitor and appends that as a pseudo CSS class. Let me explain by using a live example.
If you look in the sidebar to your right you’ll notice a list called “Popular Articles”. Because the article names are somewhat lengthy, they naturally span more then one line. I’m using a bullet image as a background and then moving the text to the right using padding and margin CSS code. This isn’t a problem in Firefox or Opera because they naturally line the text on the left wherever I want it. IE, on the other hand, decides to indent the first line so that it looks like the image to the right.
Although there may be a simple fix for this, I am definitely not a professional web designer by any means. Luckily, with help of the “CSS Browser Selector” it’s an easy fix. Here is the CSS code that was having the issue in Internet Explorer:
Code:
1 2 3 4 5 6 7 | #sidesection li { background: url(images/plus.png) no-repeat center left; padding-left: 20px; display: block; padding-right: 3px; list-style-type: none; } |
To fix this in IE, I simply add the following code to my CSS document:
Code:
1 2 3 | .ie #sidesection li{ text-indent: -1.41em; } |
Internet Explorer browsers are given the pseudo class “.ie” thus only IE browsers will obey that snippet of code. Its really quite brilliant. Now IE browsers will “indent” the first line of a list by -1.4em while other browsers will do nothing. Below are a list of pseudo class and what browser or OS they are used for. Use it exactly like I used mine. Simply add the pseudo class before the CSS code you want that browser to follow. If you are making code that is OS and browser specific, then you follow this method: .[os].[browser] .mycode with no space between OS and browser.
Available Classes
win - Microsoft Windows
linux - Linux (x11 and linux)
mac - Mac OS
ie - Internet Explorer (All versions)
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox, Camino
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, ShiiraConclusion
This script makes fixing your CSS documents much easier. It is of course not as effective as hacking your CSS so that you don’t have to use javascript, but for us lazy or technically challenged, this is a great alternative.
A better way is to use MSIE conditional comments to selectively include IE CSS that overrides your other CSS. Javascript can be turned off. IE conditional comments will always be interpreted by IE.
Also, you won’t have to re-hack it for IE 8 if it is fixed in that version.
Examples here: http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
nikki’s latest post…Mouse Balls [Computer Joke]
@nikki Agreed, conditional comments are the better route to go for accessibility. This code does provide some extra versatility if you needed custom CSS for other browsers as well. Why you would really need that I don’t know. But it is nice to keep your options open. Thanks for the link!