CODEWITHSUNDEEP
cssinternet-explorer-6
Alec Smart
Alec Smart

Reputation: 95890

How can I have a CSS style different for IE6?

I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.

I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.

How do I do that?

Edit:

I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.

Edit:

How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?

Upvotes: 0

Views: 397

Answers (6)

roryf
roryf

Reputation: 30160

You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.

I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 180004

Use a conditional comment.

<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->

edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.

You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.

What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?

Upvotes: 0

chaos
chaos

Reputation: 124297

As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.

But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.

Upvotes: 2

NickFitz
NickFitz

Reputation: 35031

If you don't want to use conditional comments, then you can use the * html hack:

h1 {
    color: green;
}

* html h1 {
    color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}

Upvotes: 8

Max Schmeling
Max Schmeling

Reputation: 12509

Here's a pretty comprehensive list of unrecommended hacks: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

Upvotes: 1

Robert Harvey
Robert Harvey

Reputation: 180787

Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.

See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/

Upvotes: 4

Related Questions