css hack for IE: is using the * acceptable

[windandwaves]

Hi Gurus

Someone taught me that using the following is like an IE hack:

div#mydiv {padding: 10px; * padding: 12px;}

meaning that Internet Explorer has 12pixels padding and the rest 10pixels.

Can I use this hack or is this too easy?

TIA


- Nicolaas

 

[Toby Inkster]

Someone taught me that using the following is like an IE hack:
div#mydiv {padding: 10px; * padding: 12px;}

I've never seen this, and don't know whether it works, but it's invalid.
Better to do something like:

DIV#mydiv
{ padding: 10px; }
HTML>BODY DIV#mydiv
{ padding: 12px; }

which works and is valid.

 

[windandwaves]

I've never seen this, and don't know whether it works, but it's
invalid. Better to do something like:

DIV#mydiv
{ padding: 10px; }
HTML>BODY DIV#mydiv
{ padding: 12px; }

which works and is valid.

It works fine. Your example I think works the other way. It works in all
browsers but IE

What I do is that I work out using php what browser it is and then serve a
different stylesheet.

However, I noticed that the asterix works fine. Just try it. It is
invalid, but that is the exact reason you do it. So that firefox, etc... do
not go for the padding 12px, while IE ignores the * and applies padding
12px.

Ta

- Nicolaas

 

[Benjamin Niemann]

It works fine. Your example I think works the other way. It works in all
browsers but IE

The problem with your 'hack' is that there is not well-defined, correct way
to parse it - because it is invalid. Which browser parses it this or that
way is even more random then with the valid hacks.

And with the upcoming IE7, which will fix most parser bugs, but not all CSS
bugs, such hacks are not a good idea anymore. Seems like conditional
comments are the least evil way to do thing like this...

 

[Toby Inkster]

However, I noticed that the asterix works fine. Just try it. It is
invalid, but that is the exact reason you do it. So that firefox, etc... do
not go for the padding 12px, while IE ignores the * and applies padding
12px.

No -- it's invalid, which is why you *shouldn't* use it.

Proper browsers (Opera, Firefox, etc) might ignore the second padding
value today, but future versions might start to apply the second padding
value. You've used an invalid contruct, so "proper" behaviour is
undefined -- the browsers can do what they like.

 

[windandwaves]

No -- it's invalid, which is why you *shouldn't* use it.

Proper browsers (Opera, Firefox, etc) might ignore the second padding
value today, but future versions might start to apply the second
padding value. You've used an invalid contruct, so "proper" behaviour
is undefined -- the browsers can do what they like.

You be pleased to know I have retrieved the items with * from my stylesheet,
placed them in ie.css and added the following code to my page:

function styler() {
$v = '';
$b = browser_detection('browser');
$file = 's/'.$b.'.css';
if(file_exists($file)) {
$v .= '<link rel="stylesheet" type="text/css" href="'.$file.'">';
}
return $v;
}

Thank you.

 

[Rossz]

What I do is that I work out using php what browser it is and then serve a
different stylesheet.

Browser sniffing is not an exact science. I wouldn't trust it.

 

[windandwaves]

Browser sniffing is not an exact science. I wouldn't trust it.

So what should I trust instead? Your claim about the kittens (pretty
funny!)?