CSS conditional if IE

Put this in the head:

<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->

In the middle of that statement you could put your alternate CSS and add !important to the end of every property so it doesn't get overridden by other CSS in your stylesheet.

Example:

#slideshow {
  width: 100px !important;
}

Select allOpen in new window

Or, instead of that, you could actually reference a completely different style sheet altogether. The latter option is more time consuming because you will have to adjust multiple stylesheets. This is a royal pain.

@CCSCOflag

That is a interesting fix! I will have to give that a shot in the future. Does it affect validation?

Just wanted to clarify when I said "in the head" I did mean in the head of your HTML where all your other declarations occur.

Does it affect validation?

Unfortunately it does, since having a backslash in your css is not proper; this is why all your um... good? browsers actually ignore lines with the backslash, because they know better.  Since IE does it's own thing it breaks the rules and reads it anyways.  It's kind of one of those choosing a lesser of two evils, you know what I mean?  I'm definitely not saying my solution is the only one.  Just giving another option.  


Just wanted to clarify when I said "in the head" I did mean in the head of your HTML where all your other declarations occur.

 I understood what you said.  Personally I do not like putting css anywhere in an html file even in the head.  I guess it's because I do not build just a one page site.  Most my sites are multiple pages and don't want to deal with css in all those pages.

@CCSOFlag

Yeah I can understand not wanting to put that CSS on multiple pages. Everything I develop is on a CMS, so the head is only declared once for the whole site. It could get frustrating if you are declaring in the head and have to change your code on every page every time.

You have 2 options really, both of which use invalid CSS... but it won't break anything:

.selector {
    width: 520px;
}

/* Target IE7 only */
>body .selector {
    width: 500px;
}

Select allOpen in new window

.selector {
    width: 520px;
    *width: 500px;  /* Target IE7 and earlier */
}

Select allOpen in new window

This worked best for me...once IE 7 fades into the background I will simply remove it from the CSS.  Thanks for the help.