One Stylesheet To Rule Them All

As an amateur web developer, and amateur web master I have had a lot of learning put into some of the more obscure areas of web development, such as stylesheets. CSS is great, but when Internet Exploder doesn’t stick to standards you’ve got to have work-a-rounds and such to make your web page display the same in IE as it does in all the standards compliant browsers.

Doing my part in to spread Firefox, I slightly evangelized my site so that if you use IE, it pops down a banner (with javascript) that encourages you to switch to Firefox, or anything else besides IE. That banner bumps down the whole page about 500 pixels, and guess what? That causes problems with CSS positioning later on as I will explain.

I’ve recently changed my social web links from the sociable wordpress plugin to the share this plugin, which is cool, because it pops up a little window and the icons aren’t always there in your face on every post. Just one share this link, and I like that.

The share this plugin by default puts the link at the bottom of each post, and I decided to move it to the right and up a line with CSS to fill some whitespace and keep the scrolling length of the page to a minimum. Then I had to re-position the pop up with CSS, and everything was cool…. until I checked my site using IE. :(

IE doesn’t take into account the javascript banner the was popped up and the pop up share links are about 500 pixles down page. Not good. Trying to figure this out was a big waste of time until I worded my google search correctly. What I had found was the Position is Evertying web site. Their article titled “Targeting IE Using Conditional Comments and Just One Stylesheet” was everything I was looking for and more.

If you are looking for an easy and simple way to add in your IE only CSS hacks without having to have a whole separate stylesheet then that article is for you.

It was for me.

Leave a Reply