Conditional Comment, it works, but why?

[patrick j]

Hi

I've been testing out the "Conditional Comment" for IE. This is because
for my web-site I want to have two style sheets, one for IE 6 and one
for other browsers. Thus I hope to have my web-site as I want it for
"other browsers" but still have it presentable in IE.

I understand why the conditional comment works, despite the subject
header for this posting. What I don't understand is why IE "ignores"
the link to the CSS that precedes the conditional comment link.

Now that I've got you transfixed with interest I will give you the URL
to my conditional comment test web-page:

<http://www.patrickjames.me.uk/cond_com_test.html>

Fortunately it is at least a very positive message.

Viewed with IE/Win 6 or 5 the background is maroon, the text is white.
Viewed with any other browser then the background is white the text is
maroon.

I have the "Link" tags in the HTML header section arranged like this:

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

As you can see the link to the "other browser" style-sheet comes before
the one within the conditional comment for IE/Win 5/6.

I understand that IE makes a decision on the basis of the conditional
comment, it's programmed to recognise it, but what I don't understand
is how it knows to ignore the link to the style-sheet for other
browsers which comes first?

Ideally I would just be glad it works and not wonder about this I guess

 

[Jonathan N. Little]

Hi

I've been testing out the "Conditional Comment" for IE. This is because
for my web-site I want to have two style sheets, one for IE 6 and one
for other browsers. Thus I hope to have my web-site as I want it for
"other browsers" but still have it presentable in IE.

I understand why the conditional comment works, despite the subject
header for this posting. What I don't understand is why IE "ignores"
the link to the CSS that precedes the conditional comment link.

Now that I've got you transfixed with interest I will give you the URL
to my conditional comment test web-page:

<http://www.patrickjames.me.uk/cond_com_test.html>

Fortunately it is at least a very positive message.

Viewed with IE/Win 6 or 5 the background is maroon, the text is white.
Viewed with any other browser then the background is white the text is
maroon.

I have the "Link" tags in the HTML header section arranged like this:

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

As you can see the link to the "other browser" style-sheet comes before
the one within the conditional comment for IE/Win 5/6.

I understand that IE makes a decision on the basis of the conditional
comment, it's programmed to recognise it, but what I don't understand
is how it knows to ignore the link to the style-sheet for other
browsers which comes first?

It doesn't, it applies cond_com_test.css first then redefines by
applying cond_com_test_ie.css. You would ge a very different result if
your markup was:

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

<link href="cond_com_test.css" rel="stylesheet" type="text/css">

 

[Harlan Messinger]

Now that I've got you transfixed with interest I will give you the URL
to my conditional comment test web-page:

<http://www.patrickjames.me.uk/cond_com_test.html>

Fortunately it is at least a very positive message.

Viewed with IE/Win 6 or 5 the background is maroon, the text is white.
Viewed with any other browser then the background is white the text is
maroon.

I have the "Link" tags in the HTML header section arranged like this:

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

As you can see the link to the "other browser" style-sheet comes before
the one within the conditional comment for IE/Win 5/6.

I understand that IE makes a decision on the basis of the conditional
comment, it's programmed to recognise it, but what I don't understand
is how it knows to ignore the link to the style-sheet for other
browsers which comes first?

What leads you to think IE is ignoring the first LINK? It's processing
both, just as it would if you didn't have the conditional comments at all.

 

[cwdjrxyz]

Hi

I've been testing out the "Conditional Comment" for IE. This is because
for my web-site I want to have two style sheets, one for IE 6 and one
for other browsers. Thus I hope to have my web-site as I want it for
"other browsers" but still have it presentable in IE.

I understand why the conditional comment works, despite the subject
header for this posting. What I don't understand is why IE "ignores"
the link to the CSS that precedes the conditional comment link.

Now that I've got you transfixed with interest I will give you the URL
to my conditional comment test web-page:

<http://www.patrickjames.me.uk/cond_com_test.html>

Fortunately it is at least a very positive message.

Viewed with IE/Win 6 or 5 the background is maroon, the text is white.
Viewed with any other browser then the background is white the text is
maroon.

I have the "Link" tags in the HTML header section arranged like this:

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

As you can see the link to the "other browser" style-sheet comes before
the one within the conditional comment for IE/Win 5/6.

I understand that IE makes a decision on the basis of the conditional
comment, it's programmed to recognise it, but what I don't understand
is how it knows to ignore the link to the style-sheet for other
browsers which comes first?

Ideally I would just be glad it works and not wonder about this I guess

Ypu are giving two conflicting commands. You must both tell what to do
if IE and what to do if not IE. There is a IE not command, but it is
not valid html. However, there is a way around this that will validate
at W3C. For example, see
http://www.cwdjr.info/broadbandMedia/formatsAX/cancanWMV.php . This
page takes an ActiveX object path if IE is present and an ordinary
object path if IE is not present. Note this page requires a rather high
rate broadband connection to buffer in a reasonable time, and if the
browser is IE, ActiveX must be on. Also a WMP must be installed.

The code of interest here is:

<!--[if IE]>
<div style="text-align:center">
<object id="player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" height="340"
width="400">
<param name="URL" value="http://www.cwdjr.info/movie/cancanvbr.wvx" />
<param name="autoStart" value="false" />
<param name="playCount" value="1" />
<param name="volume" value="100" />
<param name="balance" value="0" />
<param name="stretchToFit" value="true" />
</object>
</div>
<![endif]-->

<!--[if !IE]> <-->
<div style="text-align:center">
<object data="http://www.cwdjr.info/movie/cancanvbr.wvx"
type="video/x-ms-wvx" style="width:400px; height:340px">
<param name="src" value="http://www.cwdjr.info/movie/cancanvbr.wvx"
valuetype="ref" />
<param name="showcontrols" value="1" valuetype="data" />
<param name="showstatusbar" value="1" valuetype="data" />
<param name="autostart" value="0" valuetype="data" />
<param name="volume" value="0" valuetype="data" />
<param name="PlayCount" value="1" valuetype="data" />
</object>
</div>
<!--><![endif]-->

Nite the <!--[if !IE]> <--> which is closed by <!--><![endif]--> to
take the correct path if not IE and to also validate at W3C.

 

[dorayme]

I understand why the conditional comment works, ... What
I don't understand is why IE "ignores"
the link to the CSS that precedes the conditional comment link.

Think of a single stylesheet, and two instructions:

div {

padding: 5px;
padding: 40px:
}

Browser reads both but resolves to the last instruction. You get
big padding!

But with

div {

padding: 40px;
padding: 5px:
}

you get modest padding.

Similar thing with stylesheet declarations in the head, the last
one is the one that counts (if it is can be understood!)

 

[Andy Dingley]

I've been testing out the "Conditional Comment" for IE. This is because
for my web-site I want to have two style sheets, one for IE 6 and one
for other browsers.

You have too much in cond_com_test_ie.css

Don't write "two stylesheets" here. Write one stylesheet for the site,
for all standards-compliant browsers, then write the minimal set of
fix-ups for IE and apply only those through the conditional mechanism.

I know of only _one_ property that's justified to go in here! Anything
else you can fix by good CSS authoring practice and using
standards-mode rendering.

 

[patrick j]

Don't write "two stylesheets" here. Write one stylesheet for the site,
for all standards-compliant browsers, then write the minimal set of
fix-ups for IE and apply only those through the conditional mechanism.

Thanks to all who have responded. Together the replies have given me a
great deal of knowledge I did not have.

I will go ahead with creating my general purpose style-sheet for the
site and then have a minimalist one for IE to have a peek at and sort
out any issues for IE 6.