ansaurus

Question

Evaluate a css expression only in IE<7 w/out using conditional comments?

Answer 1

A:

You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:

.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}

Diodeus 2008-10-29 17:50:38

I would prefer to avoid adding the additional file, but if I can't find another solution I'll probably still go the conditional comment route before adding a script. Thanks for the input.

Prestaul 2008-10-29 18:52:12

Answer 2

+1 A:

I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.

If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)

#myDiv {
  height: 3.0em !important; /* non-ie */
  height: 2.6em !ie-only; /* ie7 */
  height: 2.4em; /* ie < 7 */
}

Dave Anderson 2008-10-29 18:23:13

This is a very interesting hack that I've never seen before. After a little more digging I've found several mentions of this across the web but I still couldn't get it to work... Maybe because I'm using multipleIEs? I'll certainly put this in my toolkit for future reference though.

Prestaul 2008-10-29 18:46:40

Answer 3

A:

This answer may be what you are looking for: http://stackoverflow.com/questions/213309/in-line-css-ie-hack#213458

alexp206 2008-10-29 18:35:18

Nope. I've already tried the underscore hack and didn't have any luck. The carat (or almost any other symbol, an asterisk being the most common) targets all versions of IE and won't do me any good.

Prestaul 2008-10-29 18:49:52

Answer 4

+3 A:

I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).

/* IE6 only */   
* html .myClass {
    width: 500px;
}

I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.

As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.

You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <style type="text/css">

        .ie6 {
            display: none;
        }

        * html .ie6 {
            display: expression("block");
        }

        * html .ie7 {
            display: expression("none");
        }

    </style>
</head>
<body>
<div class="ie6">
    This is IE6
</div>
<div class="ie7">
    This is Firefox or IE7+
</div>
</body>
</html>

zwerd328 2008-10-29 19:05:54

Worked perfectly, thank you. I'm using an expression to implement max-height on an element. If you've got a max-height solution I'd love to see it! I also have previously posted a min-width solution: http://stackoverflow.com/questions/93274/min-width-in-msie-6#93530

Prestaul 2008-10-29 19:34:41

Sorry, I don't know of a max-height technique off the top of my head. I tried to implement it once in a table and gave up because of IE. As for the min-width solution you have, I actually responded to it awhile back: http://stackoverflow.com/questions/93274/min-width-in-msie-6#231174

zwerd328 2008-10-29 20:45:56

ansaurus

tags:

views:

answers:

Evaluate a css expression only in IE<7 w/out using conditional comments?

related questions