[SOLVED] How do I write IE conditional comment

[Lchad]

I have a site I'm working on temporarily located here http://geocities.com/lchadwind/

It looks fine in IE7 and FF2 but the .menu classes are too wide for IE6.
So my third div floats down underneath the first two.

Since I've been playing around with the margins and padding and widths and not come up with anything that will work as a compromise across the browsers, I've decided to use a Conditional Comment.

Can someone tell me how it's done? I've looked at several tutorials and am completely confused. None of the tutorials worked. I'm sure I did them wrong but hey.. I tried...

[alexgeek]

Code: Select all

<!--[if IE 6]>
<style type="text/css">
.menu {
width: 100px /*change this*/
}
</style>
<![endif]-->

Try that

[alexgeek]

If this is a problem in IE6 and below use this:

Code: Select all

<!--[if lte IE 6]>

[Lchad]

Beautiful Alex .. thank you...
I had tried your example but did not have this

<style type="text/css">

I just used <style>.menu code here </style>
Is that where I went wrong?


I did find another solution but I'm not sure it's as good as the one Alex gave.

Code: Select all

.menu {
    width: 180px;  /*style for all */
    width: 150px; /*style for IE*/
    float: left;
    margin: 10px 0px 4px 11px;
    text-align: center;
    }

But it also worked.

[MikeHopley]

Don't worry; it's really easy once you get used to it, and it's extremely useful.

First, let's look at an ordinary HTML comment:

Code: Select all

  <!-- No-one will ever see this text, except in the source code. -->

Browsers will completely ignore everything inside those comment symbols.

IE, however, looks slightly deeper, because it's watching out for conditional comments (CC's):

Code: Select all

 <!--[if IE]>
       <p>You are using Internet Explorer. You poor, misguided child.</p>
 <![endif]-->

IE will treat this exactly as though the blue bits did not exist. In this example, only IE will display the paragraph; all other browsers ignore it completely.

CC's are great for serving an extra stylesheet to IE. For example:

Code: Select all

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

In this example, all browsers (including IE) will get "style.css", but IE will also get "IE.css".

So you can use IE.css to override the existing styles. Let's say style.css has p { color: blue }, and IE.css has p {color: red }. Then IE will get red paragraphs, while all other browsers get blue paragraphs.

You can also use CC's to isolate different versions of IE:

Code: Select all

<!--[if IE 7]>
        <link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
        <link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

Here, only IE7 will get IE7.css, and all earlier versions (IE6, IE5,...) will get IE6.css instead. The "[if lt IE 7]" stands for "[if less than IE 7]. Similarly:

• [if gt IE 6] = "if greater than IE 6"
• [if gte IE 6] = "if greater than or equal to IE 6"
• [if lte IE 7] = "if less than or equal to IE7"

This syntax must be copied exactly, or it will fail. Note the space between "IE" and "7".

[alexgeek]

I don't think the other will validate, without the use of "!important;".
And yes I think the style tag with not attributes was where you went wrong

[Marc]

Originally Posted by alexgeek

I don't think the other will validate, without the use of "!important;".
And yes I think the style tag with not attributes was where you went wrong

What?? What needs the '!important'.. Please explain - i seem to have lost you!

[alexgeek]

Originally Posted by Marc

What?? What needs the '!important'.. Please explain - i seem to have lost you!

When you "override" a property, you should specify it as !important;
This means, that "this property is not important, if another script tells it to be something else, let it."

Practical example:

HTML: Select all

<style type="text/css">
.boat {
color: red !imporant;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.boat {
color: blue;
}
</style>
<![endif]-->

This would mean that in IE7 the boat class would be blue.

[Marc]

Would it :s That looks like to me they would both be red. Mabey i need to get off this computer! Im fighting shadows!

[alexgeek]

It is using some programming techniques known as inheritance and overriding.
Because the boat's red property is not important, the IE7 conditional comment overrides the existing one.
Do you follow?

[MikeHopley]

Originally Posted by alexgeek

When you "override" a property, you should specify it as !important;

Whoa there! That's like using a bazooka to kill a mosquito.

You need to understand the rules about CSS conflicts before you start fire-bombing your code with !important everywhere.

1. The rule with the greatest specificity wins (so body p { ... } beats p {... }, and p#intro { ... } beats them both).
2. When specificity is equal, the last rule takes precedence.
3. These rules apply with multiple stylesheets: it would be the same as combining them into one giant stylesheet.

In my example, the latter rule takes precedence, so IE gets red paragraphs.

Practical example:

HTML: Select all

<style type="text/css">
.boat {
color: red !imporant;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.boat {
color: blue;
}
</style>
<![endif]-->

This would mean that in IE7 the boat class would be blue.

No, that won't work! !important overrides everything (except another !important). In your example, all browsers will get red.

!important is extremely useful for debugging CSS conflicts, but you must remove it after debugging -- or else your debugging process will be compromised next time.

I have never found a need for !important, except for in debugging. Indiscriminate use of !important is sloppy CSS, and it will come back to haunt you one day -- when you run out of overrides, and realise you need to learn about specificity.

[alexgeek]

i'll shutup then

[Lchad]

No Alex.. you don't need to shut up!

You answered my question perfectly. 99 out of 100 times I use external style sheets but this ONE time, I have to put the css inline because this is a shopping cart homepage. No ability to externally attach a stylesheet.
Well maybe there is but I don't want to figure it out..

Mike.. you should be a teacher! (Maybe you are?)

Excellent explanation. I will stick this in my subscriptions.

Thanks a million!

[MikeHopley]

Originally Posted by alexgeek

i'll shutup then

No, don't do that! You gave exactly the right answer for Linda's problem.

And if you had kept quiet about !important, you would still be unaware how it really works.

Mike.. you should be a teacher! (Maybe you are?)

Thanks. I'm a part-time badminton coach. I definitely get a kick out of teaching; if the writing fails dismally, teaching could be my bail-out option.

[alexgeek]

Okay, I'll keep blabbering

And a "mentor" is a teacher anyway, so you are ha.

[Lchad]

I appears that everything above is not working.

I have added this to between the <head></head>

Code: Select all

 <!--[if IE 6]>
    <style type="text/css">
    .menu {
    width: 180px; 
    }
    </style>
    <![endif]-->
      <!--[if IE 7]>
    <style type="text/css">
    .menu {
    width: 219px; 
    
    }
    </style>
    <![endif]-->

This is the code further down for the same div.

Code: Select all

.menu {
    width: 205px; 
    float: left;
    margin: 10px 1px 4px 0px;
    text-align: center;
    }

Did I miss something? None of the browsers are responding to their own code.
I have it set for ff at the moment but the IE7 and IE6 are not following their if's.

[alexgeek]

Is it possible to put the the code before the conditional comments? that should work.

[Lchad]

Ok that worked!
I did misunderstand the directions..
Now the conditional comments sit in the html code and it works fine!

Thanks again Alex!

[alexgeek]

You're welcome

[Monie]

Can we do this for Firefox, Opera, Safari or any other browser?