CSS conditional if IE

pda4me
pda4me used Ask the Experts™
on
How do I alter the existing css code here to do a top margin of 20px if browser is IE 7?  I want it to be this for more current versions of IE and FF, but IE 7 is killing me and I need to adjust the top-margin in that case.

#slideshow {
border: 1px solid #e2e2e2;
background: #ffffff;
padding: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0px 0px 20px 0px;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
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;
}

Open 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.

Commented:
Unfortuantely you cannot use conditional statements in a css file.  I do not like putting my css in the html pages, thus I use a backslash.  All the othe rbrowser ignore anything after a backslash, but IE still uses it.  Thus you can do this:

#slideshow {
border: 1px solid #e2e2e2;
background: #ffffff;
padding: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0px;
/margin-top: 20px;

}
Top Expert 2011

Commented:
@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.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
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.
Top Expert 2011

Commented:
@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;
}

Open in new window


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

Open in new window

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial