Conditional Comments issues [Archive]

View Full Version : Conditional Comments issues

BekahRuth

01-17-2007, 11:52 PM

I have been trying to add a conditional comment to my website so that I can redirect IE 6 and lower to a different stylesheet. I can't seem to get my IE 6.0 browser to recognize that conditional comments. Here is a link to the page: http://tehome.net/trial.html.

The is the code I used in the head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Trace Elements</title>

<meta name="" content="Trace Elements : style for your home." />
<meta name="Keywords" content="trace elements, tehome, tehome.net, tehome.com, anchorage, ak, alaska, home, decor, accessories, accents, interior design, lighting, rugs, furniture, furnishings, candles, modern, decorate, trase elements, design, designer, bedding, contemporary, pillows, dining, entertaining, gifts, gift, " />
<meta name="Description" content="Home accessories boutique in downtown, Anchorage, Alaska." />
<link href="stylesheet3.css" rel="stylesheet" type="text/css" />

<style type="text/css">

</style>
</head>

Can anyone tell me what I am doing wrong? Thank you!

jscheuer1

01-18-2007, 05:44 AM

Hard to know what the issue is, it could be several things or a combination. In order of which I see as most likely:

1 ) If you are using the eolas (or any other) stand-alone installation of IE 6 on a computer that also has IE 7 installed, IE 6 will think that it is IE 7 when it sees these comments and thus ignore them just like IE 7 would. A real IE 6 browser installed on a computer as its primary Explorer browser will follow the comments as intended.

2 ) Using an XHTML DOCTYPE throws IE 6 into Quirks mode so, your styles may not work as expected. To test, use a HTML 4.01 strict DOCTYPE and just a plain <html> opening tag.

3 ) If the styles included on the IE 6 specific stylesheet aren't written correctly in order to produce the desired effect, they won't work anyway, even if IE 6 does look at them. To Test, remove the conditional comments.

4 ) Styles cascade so with this:

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

<style type="text/css">

</style>

The styles in red will override anything in either stylesheet. To Test, get rid of the red stuff.

5 ) The href attribute should be quoted:

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

6 ) Poorly constructed META tags may be interfering, to test, temporarily remove them.

Twey

01-18-2007, 09:20 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
<!--Comments in stylesheets are not ignored in XHTML, so that <style> element may as well be blank.

jscheuer1

01-18-2007, 01:47 PM

Comments in stylesheets are not ignored in XHTML, so that <style> element may as well be blank.

Probably not in IE 6.

Twey

01-18-2007, 01:55 PM

No, since IE doesn't support XHTML at all. The page will be unviewable.

jscheuer1

01-18-2007, 02:08 PM

No, since IE doesn't support XHTML at all. The page will be unviewable.

Huh? I really don't think this is borne out by experience. As I implied before, as far as I know (and I did tests on this at one point) - Even with a server that serves XHTML and a valid XHTML page (or even just one that doesn't break the server's ability to serve it as XHTML), IE 6 will render the page in HTML quirks mode. Generally not a pretty picture for valid XHTML but, a far cry from unviewable, unless you are Monk, or something like that.

Twey

01-18-2007, 02:27 PM

Even with a server that serves XHTML and a valid XHTML page (or even just one that doesn't break the server's ability to serve it as XHTML), IE 6 will render the page in HTML quirks mode.No, it will render it in Quirks if it's sent as text/html. This isn't XHTML, it's invalid HTML (what Mike refers to as pseudo-XHTML), and you're right, those comments will have no effect if it's being rendered as bad HTML.

jscheuer1

01-18-2007, 04:42 PM

Well I did do an experiment a while back and validated a page as XHTML strict or perhaps transitional. I uploaded it to the server and then established that it was being parsed that way by FF and then found that it rendered in quirks mode in IE 6. I suppose this could have had as much to do with the server recognising IE 6 couldn't parse the XHTML as anything else and serving it as HTML, or perhaps FF parsing it as XHTML even though it was served as HTML.

Twey

01-18-2007, 06:19 PM

I suppose this could have had as much to do with the server recognising IE 6 couldn't parse the XHTMLOne of IE's most irritating little idiosyncracies is that it sends Accept: */* with every request, telling the server it can parse anything.
or perhaps FF parsing it as XHTML even though it was served as HTML.Neither. It would have been parsed in Standards mode by Fx, but only after error-correcting to HTML. The resulting DOM tree isn't an XHTML one (as evidenced by the fact that things like innerHTML work with pseudo-XHTML, while they don't when parsing an XHTML document).

jscheuer1

01-18-2007, 08:57 PM

OK then, FF said it was XHTML, so there you go and if what you say about IE accepting anything is true, it managed to render the page, though poorly.

jscheuer1

01-18-2007, 09:11 PM

Stop the presses! That was then, this is now. I happen to have that file still laying around on the server and now, I get the open or save dialogue in IE 6 when I try to navigate to it. It still renders fine in FF and Opera as XHTML.

I would attribute this to either a server upgrade or live update changing IE 6 (this is a real copy of IE 6). IE 7 also does he same thing on my newer machine (asks to save or open).

Interestingly, the default program for opening this type of file on my old machine is FF! As far as I recall, I never set that up. It quite likely was automatically assigned to that role at some point.

Twey

01-18-2007, 09:51 PM

Oh, it was served as XHTML? Sorry, I thought you said it was served as HTML.

I'd guess (no more) that IE was doing its content-type-guessing thing, and overriding the page's Content-Type with text/html. This is obviously a bug (as is every instance of this behaviour) and may have been fixed.
Interestingly, the default program for opening this type of file on my old machine is FF! As far as I recall, I never set that up. It quite likely was automatically assigned to that role at some point.I would suspect that Fx probably associated itself with .xhtml files when it was installed, especially if there was no previously allocated handling program.

BekahRuth

01-18-2007, 10:37 PM

Thanks so much for your comments. I tried creating another page in HTML strict and left out the style comments and meta tags. However, the file still doesn't pick up the ie stylesheet when using IE browser. I even changed the comments to IE (instead of lte IE 6) so that if I was using a version higher than 6.0 it would still work, but to no avail. The ie stylesheet is blank, so shouldn't the page be all messed up if IE where picking up the conditional comments?

Here is the html in the head:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Trace Elements</title>
<link href="stylesheet3.css" rel="stylesheet" type="text/css">

<style type="text/css">
</style></head>

Here is the link to the page:
http://tehome.net/Untitled-1.html

Twey

01-18-2007, 10:47 PM

If the IE stylesheet is blank, how can you tell it's not working? A blank stylesheet won't do anything anyway.
<link href="ie-stylesheet.css" rel="stylesheet" type="text/css" />That slash isn't valid HTML.

BekahRuth

01-18-2007, 11:20 PM

Thank you so much! I think that was the problem, the slash.

jscheuer1

01-19-2007, 05:14 AM

I think you are misunderstanding the purpose of content inside of an IE conditional comment. It is not a substitute for what went before. It is something to be added to what is already parsed. So, in the case of stylesheets - say you have a regular stylesheet for the page and after that you have one inside a conditional comment. All browsers will follow the the first stylesheet's rules, including IE. IE will also add any styles included in the stylesheet linked from within the conditional comment.

BekahRuth

01-19-2007, 08:21 PM

Wow, okay, you're right, I was misunderstanding it. Thanks for the clarification.

BekahRuth

01-19-2007, 08:26 PM

but i'm still confused about why when i place the file inside a folder, ie ignores the ie stylesheet.

jscheuer1

01-19-2007, 10:28 PM

but i'm still confused about why when i place the file inside a folder, ie ignores the ie stylesheet.

That's a different issue and is the same regardless of how any browser begins to look for your stylesheet. OK, let's say the stylesheet is in the root of the domain but, your page is one level off of the root:

www.some_domain.com/ie_styles.css

www.some_domain.com/pages/page.htm

Since the page isn't in the same folder as the style, the link href on the page must point to the stylesheet. The easiest way is via the absolute path:

<link rel="stylesheet" href="http://www.some_domain.com/ie_styles.css" type="text/css">

This avoids the sometimes confusing relative and network paths which can be used and are shorter but that require more abstract thought in their construction.

Say the stylesheet is here:

www.some_domain.com/styles/ie_styles.css

and the page is here:

www.some_domain.com/pages/page.htm

Then the link on the page can be:

<link rel="stylesheet" href="http://www.some_domain.com/styles/ie_styles.css" type="text/css">

Pretty simple when you use absolute paths. In fact, no matter where the page is, it could even be on another domain, if the stylesheet is here:

www.some_domain.com/styles/ie_styles.css

The link on the page can be:

<link rel="stylesheet" href="http://www.some_domain.com/styles/ie_styles.css" type="text/css">

One thing that gets tricky though is, if you have images in the stylesheet, their paths should be absolute too.

BekahRuth

01-20-2007, 12:59 AM

Now that you put it that way it makes perfect sense, Excellent! Thanks!

Megan1967

02-14-2009, 06:35 PM

Hello all,

I'm having the same problem as the original poster and I've tried everything suggested in this thread to no avail. The weird thing is that when I remove the non-commented style sheet link, IE6 sees the conditionally comment style sheet. Both are in a folder called css which is in the main directory. There is no problem with the non commented sheet, just the conditionally commented one. I was up until 3 last night trying to figure it out and am thinking fresh eyes might help. Thanks in advance!

Here is the link: http://www.childandfamilypsychological.com/success2.html

Here is the head section:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Child, Family, Psychological, Services, mental. health, assessment, evaluation, diagnosis, outpatient, therapy, gifted, excpetional, learners, dyslexia, dysgraphia, dyscalculia, non-verbal, learning, disorders, ADD, ADHD, social, emotional, difficulties, counseling, advocacy, independent, educational, evaluations, IEP, section, 504, plans, referral, presentations, education, vocational, rehabilitation, human, service, agencies, unique, learners, 437, south, Yellowstone, drive, madison, wi, wisconsin, nira, scherz, busch, dennis, christofferson, school, psycology, psychologist, wisconsin, department, of, public, instruction, Dane, county, mental, health, consortium, disabilities, board, mayor's, disablity, commision, ida, International, dyslexia, association, twice, exceptional, gifted, talented, adult, homeschool, university, wisconsin" />
<title>Child & Family Psychological Services</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/general.css" />

<style type="text/css">
</style>
</head>