style switching not work on IE, but works on everything else

[trampt]

Script Title: Style Sheet Switcher (v1.0)
Script URL: http://www.dynamicdrive.com/dynamici...etswitcher.htm

Problem: The script seems to work great on all browsers on my Mac. It also works fine when running on a PC ... except for Internet Explorer. When you choose the alternate style you get no style sheet. Tested on three different PC's. Does anyone know what could be causing this?

If you click link at the top right "change this site with just one click" can you change the style sheets inside the popup.

www.addedsugar.com

Thanks in advance

[trampt]

Nobody knows why this doesn't work?

[ddadmin]

Hmmm at a glance I can't see any problems with your set up. The script seems to be switching styles properly, just not the "corporate" style sheet specifically. In other words, switching back to the default style sheet in IE works.

Try adding a 3rd style sheet that's minimal in substance, and see if you're able to set the script up to switch to that style sheet in IE. This is to confirm where the problem lies.

[trampt]

Well I added a third style sheet sheet and IE won't pick up either "alternative" style sheet. The only thing I can see that is different on the DD setup is that the "default" style sheet doesn't have a title, but when I try that it seems to load my alternate style sheets on top of the default instead of replacing it causing everything to screw up.

(loaded to another domain for testing so I wouldn't mess up my live site)

http://www.trampt.com/test.shtml

[trampt]

Also, if I change one of the other "alternate stylesheet" to "stylesheet" that one will work and the other "alternate stylesheet" will not.

If I try and use the 'none' link for the default stylesheet it breaks and renders both the default and alternate stylesheets together which just completely breaks the layout.

[ddadmin]

Ok it seems IE is suddenly having problems with rel="alternate stylesheet", namely, that such style sheets aren't enabled even if told to. For a temporary fix, find the line:

if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet

inside the .js file, and change that to:

if(cacheobj.getAttribute("title") == title){
cacheobj.disabled = false //enable chosen style sheet
cacheobj.setAttribute("rel", "stylesheet")
}

I'll have to investigate the issue more closely later and see if the patch should be added to the DD script itself.

[trampt]

That is beautiful work. The script works like a charm now.

[ddadmin]

Just an update on this issue in IE, I think I found the problem, which isn't due to a bug in the script. Your CSS is defined as follows:

<link href="/_css/global-01.css" type="text/css" media="screen" rel="stylesheet" title="pop" />
<link href="/_css/global-02.css" type="text/css" media="screen" rel="alternative stylesheet" title="corporate" />

Notice how you gave your default stylesheet a title as well. This shouldn't be the case, as only rel="alternate stylesheet" styles should have a title attribute.

[mwinter]

Just an update on this issue in IE, I think I found the problem, which isn't due to a bug in the script.

In so far as the script doing something wrong; no, there's no bug. The problem as I see it is that IE doesn't understand how style sheets can be combined, and extra effort is required to get it to co-operate.

<link href="/_css/global-01.css" type="text/css" media="screen" rel="stylesheet" title="pop" />
<link href="/_css/global-02.css" type="text/css" media="screen" rel="alternative stylesheet" title="corporate" />

Notice how you gave your default stylesheet a title as well.

His preferred style sheet, yes.

This shouldn't be the case, as only rel="alternate stylesheet" styles should have a title attribute.

Not so. I'll try to explain it clearly to anyone that's interested. Section 14.3 of the HTML specification describes external style sheets.

There are two types of style sheet: persistent, and alternate. A persistent style sheet is always applied to whatever media is indicated. Switching between style sheets does not affect the persistent sheets (there can be more than one). Alternate style sheets are mutually exclusive: there can be more than one style sheet per group, but only one active group. Amongst the alternate style sheets, the author may designate a preferred set.

A persistent style sheet is one that doesn't include a title attribute. As it isn't part of any group, it doesn't get a name. The rel attribute for a persistent style sheet simply contains "stylesheet".

An alternate style sheet does have a title attribute, and that designates the group to which it belongs. An alternate style sheet also has the word "alternate" in the rel attribute value (rel="alternate stylesheet").

The preferred style sheet has a title attribute just like any other alternative, but it doesn't include the word "alternate" in the rel attribute value.

The markup is valid; IE doesn't like it.

Mike

[ddadmin]

Hi Mike:
Just to clarify then, the only difference between a preferred style sheet and persistent style sheet syntax wise is that the former has a "title" attribute added right? How does the browser treat these two types of style sheets differently? And for rel="alternate stylesheets", the only special treatment it gets is that it's disabled by default by a competent browser until you explicitly enable it via scripting right?

I'm wondering whether, for the next update of this script, to just use regular linked style sheets for the alternates as well and using the disabled attribute to disable the secondary ones by default:

<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="stylesheet" type="text/css" media="screen" title="blue-theme" href="custom.css" disabled="disabled" />
<link rel="stylesheet" type="text/css" media="screen" title="brown-theme" href="custom2.css" disabled="disabled" />

Is there anything horribly wrong with this approach?