Switching Stylesheets in IE not Working
Posted by: Nimda in CSS, Browser Chat, Tech Support, Internet ExplorerApparently there are some issues with Internet Explorer 6 and Internet
Explorer 7 when it comes to Switching .CSS Style sheets. That should
certainly come as no surprise to anyone who codes websites and then tests in
IE - It almost always doubles your initial troubleshooting time - until
you’ve done it 500 times or so!
Having said that, the problem is that when you allow the user to switch .css
stylesheets from within a web page and you test in FireFox 2.x - for example
- it works quickly and successfully. When you then fire up your dreaded
Internet Explorer for further testing you might find that - Oh, what a
surprise - that the .css Stylesheet switch does not work exactly as anyone
one would like - especially you - until you “refresh” the Internet Explorer
Page. Then IE 6 & 7 behave as good Browsers should.
The problem with the ‘Refresh’ (half-baked) solution is that you then have
to go and write some more code to get the user to hit the ‘refresh’ button
for Internet Explorer to change .css Stylesheets successfully. That
certainly is not the level of ‘ease-of-use’ or professionalism that we like
to see.
So, here is a solution that worked for me.
If you’ve scoured the web already and looked for ways to effect the .css
Stylesheet switch into your website then I’m assuming that you’ve come
across one of the standard methods - there’s only two or three out there
that are well documented anyways. (As an aside, this is not the IE
‘peekaboo’ issue!)
My solution was to force an Internet Explorer page refresh from within the
html page as opposed to from within the .js file.
The original html code that I had to make the .css Stylesheet switch was
like so:
a href=”#” onclick=”setActiveStyleSheet(’stylesheet2′); return false;”
To get IE to make my .css stylesheet switch properly I had to change this
code to:
a href=”#” onclick=”setActiveStyleSheet(’stylesheet2′); javascript:history.go(0); return false;”
And then all worked seemingly perfectly in Internet Explorer versions 6 and 7.
I’m not a professional coder less still any kind of a Java Scripter so I’m
not sure whether this is the best way or not. I have no idea. However I do
know that this is not easily found as a solution on the Web even tho’ the
method of effecting a .css stylesheet change is. I find that odd. I can’t be
the only one to have come across this issue let alone to have found a
resolution for it.
Anyways, If you are having trouble getting your .css stylesheet switch to
work in Internet Explorer IE versions 6 and/or 7 then try forcing the page
refresh from within the html page. I hope this solution works for you.
Entries (RSS)