CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

CSS Wildcard (Universal Selector)

Many of the problems I've noticed people having while developing a web site is browser compatibility issues between IE 6/7, FireFox, Opera and Safari. And since IE7 removed some of the old hacks we used (the !important tag and the box hack), it's become even more frustrating.

For starters, now we need to make a special CSS file for Internet Explorer, we do this by using an 'if statement' in the HTML. And that looks like this:

<link href="file.css" rel="stylesheet" type="text/css" /> 
<!--[if IE]> 
<link rel="stylesheet" href="file-IE.css" type="text/css"/> 

<![endif]-->

What happens is, IE will run through the normal style sheet, apply those styles and then look through the IE style sheet and use any elements listed in there to override styles previously defined in 'file.css'; so it's not like you have to have 2 versions of the CSS file, only the values that need to be changed for IE.

That being said, I've been using this method for a while now and noticed that the IE style sheet can get quite large. So I took a step back and tried to think of an easier way to solve the browser compatibility problems. I then ran into the CSS wildcard character. The wildcard will override all values (and browser defaults) defined within it, this is what it looks like, and it should be located at the very top of your CSS file:

* { 
margin: 0; 
padding: 0; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-weight: normal; 
text-decoration: none; 
}

It will remove all default margin, padding, borders, bolding (anything you want to define) from ALL elements. These can all be redefined later in the CSS file like this (for example):

h1,h2,h3,h4,h5,h6{font-weight:bold;}

This method will solve a lot of your browser compatibility problems and can cut the IE style sheet down to only a few elements. it's especially helpful when styling forms since there are a lot of default padding and margin values on forms and form elements that many don't think of often enough.I hope this helps, enjoy.

with ease,
tim