different valid css for ie6, ie7 and firefox

I've got a bad news for you. You can't afford to use only one css. Your precious design will look awful, when the user checking it in Internet Explorer 6, 7 or in Firefox. Which is good in ie, that probably looks terrible in Firefox and vica versa. That's why you really have to use separate css for each browsers. In the old times it was enough to put the * or the _ selectors to solve the problem (or just have that silly line at the very bottom of your page: "This web displays best in Firefox and IE7 above". )
Example:

.div {
  margin-left: 20px;      --> for all browsers
  _margin-left: 10px;    --> for ie6
*margin-left: 12px;      --> for ie7 and below
}

Actually, it works...untill you want to validate it with W3C. Instead of this, you should use a way more elegant (and valid) method.

How to

Put this lines somewhere between you <head> and </head> tags

<link href="your-css-for-firefox.css" rel="stylesheet" type="text/css" />

I suggest, to create your main css (for Firefox) and after save it as css for ie6 and ie7. Than do the changes what you have to :)

Just to let you know

Browser Statistics

2009	IE7	IE6	IE8	Fx	Chrome	S	O
February	25.4%	17.4%	0.8%	46.4%	4.0%	3.0%	2.2%
January	25.7%	18.5%	0.6%	45.5%	3.9%	3.0%	2.3%

There are still tons of people are using ie6.

This web design tutorial brought you by Attila Hajdu, expert web designer, multimedia specialist in Portsmouth.

back to css tips