tags:

views:

267

answers:

5

Ok so i want to make my border css only applicable to ie8 or earlier (as in not ie9 when it comes out).

purpose: so that in ie, the missing dropshadow will be replaced with a border:

the * hack doesnt seem to be working? im testing in ie8 locally...

input, textarea{
display:block;
border:none;
*border: 1px solid #000;
-moz-box-shadow: 0px 0px 1px 1px #999;
-webkit-box-shadow: 0px 0px 1px 1px #999;
box-shadow: 0px 0px 1px 1px #999;

-moz-border-radius: 2px;
-webkit-border-radius: 2px; 
margin: 1px 0px 10px 0px;
font-size:12px;
color:#494949;
}
+12  A: 

Do not use CSS hacks, use conditional comments for targeting IE versions instead.

Residuum
+1. Definitely the right answer. Side note: Don't blindly check for IE as standards support is getting better. Instead target *specific* IE versions or use the *lt* operator to avoid catching future versions.
Joey
are there any conditional statements i can write inside my css?i'd like to avoid additional css files
Haroldo
Unfortunaltely for you, additional CSS files is the best way to go.
Kyle Sevenoaks
+1 for Johannes' comment. The IE team is progressing well, and IE9 is on a good way to becoming a *very good* standards-compatible browser.
poke
Jørn Schou-Rode
@Haroldo Conditional comments are the best way to future proof your website. IE will only load the files that conform to your comment conditions and the other browsers won't load them all. This method is far, far cleaner than using dodgy hacks that only target the current browser environment.
Nathan Ridley
@Jørn, Yes, I agree, you can just add the page content right there, guess I'm just too usd to using lots of different stylesheets, but I see using many stylesheets as the best idea as to avoid changing head if tags on many pages. Takk for det! +1
Kyle Sevenoaks
I think `* html` is still acceptable CSS hack (for IE6). But `*border` and other hacks that are invalid CSS are entirely inappropriate.
bobince
@Johannes Rössel: That's why i wrote "IE versions" in my answer and not "IE".
Residuum
+2  A: 

Add

<!--[if lt IE 9]>
        <link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]--> 

To your head tag and use this new stylesheet to define what you want IE to do.

They're called conditional comments and IE uses them to differentiate between browsers :)

Kyle Sevenoaks
Same here: Please don't simply use `if IE` as that will target *all* IE versions, past and future. For current and not-yet-released versions you're likely only messing things up that way. Instead target specific or explicitly past versions.
Joey
Yes, I missed that, thanks :) will edit to correct my mistake
Kyle Sevenoaks
+1 For being the first to post the relevant code sample. Og for kommentar på norsk :)
Jørn Schou-Rode
Hihi, jeg prøver. Takk :)
Kyle Sevenoaks
+4  A: 

Adding to Residuum's answer, this is the code you will need to reference the "pre IE 9" stylesheet:

<!--[if lt IE 9]>
<link href="ie-pre-9.css" rel="stylesheet" type="text/css" />
<![endif]-->

The expression in the first line states that the markup within the comment should be evaluated on all versions of Internet Explorer with a version number less than (lt) 9. On non-Microsoft browsers, the code will be treated as comment - i.e. it will be ignored, and the extra stylesheet will not be included.

If you prefer not to create an additional stylesheet for your Internet Explorer fixes, you can instead use conditional comments to switch on/off a container around your entire page content, and the use the presence of this container to turn the fixes on/off. Example:

<!--[if lt IE 9]><div class="ie"><![endif]-->
Page content here...
<!--[if lt IE 9]></div><![endif]-->

In your main CSS file, you can now prefix any selector with .ie to make it target only Internet Explorer with version numbers less than 9:

a { color: red; }
.ie a { color: blue; }
Jørn Schou-Rode
+1 for conditional comments to include a class rather than a whole separate stylesheet (I usually do it on `<body>`). There's no sign that IE9 will support `box-shadow` yet though (the Preview Platform doesn't).
bobince
@bobince: The Platform Preview also doesn't do HTML 5 `<video>` or mutliple backgrounds. Both are on their agenda.
Joey
A: 

there is a hack like i was looking for, just add this to the end of a css statement before the ;

\9

targets ie <=8

Haroldo
But isn't that the opposite of what you were asking for?
Jørn Schou-Rode
sorry had my greater than sign the wrong way around
Haroldo
to be clear, this would look like: `color: blue\9;` and targets IE6-8.
philfreo
A: 

You really should just add a conditional stylesheet instead of adding hacks. You will thank yourself later.

Kevin