@import CSS not working in IE
Hi,
I am using a lovely peice of jQuery to swap between CSS style sheets via links on my website.
Problem is, the $("link[rel=stylesheet]") request works beautifully accross all browsers, but the $("style[type=text/css]") request does not work with IE. I have also tried $('style[type="text/css"]') but still no luck.
Full script is below. Any help/direction would be much appricated.
Marney
<script type="text/javascript" src="/Portals/19/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// autumn
$("#css-autumn").click(function() {
$("link[rel=stylesheet]").attr({href : "/Portals/19/Skins/Design001/autumn.css"});
});
// bee Sting
$("#css-beeSting").click(function() {
$("link[rel=stylesheet]").attr({href : "/Portals/19/Skins/Design001/beeSting.css"});
});
// FONT Times Verdana
$("#css-timesVerdana").click(function() {
$("style[type=text/css]").text('@import url("/Portals/19/Skins/Design001/timesVerdana.css");');
});
// FONT Times Lucinda
$("#css-timesLucinda").click(function() {
$("style[type=text/css]").text('@import url("/Portals/19/Skins/Design001/timesLucinda.css");');
});
</script>
<ul>
<li><a id="css-autumn" href="#autumn"><img height="26" alt="" hspace="0" width="167" align="absMiddle" border="0" src="/Portals/19/Images/Colour_Autumn.gif" /></a></li>
<li><a id="css-beeSting" href="#beeSting"><img height="26" alt="" hspace="0" width="167" align="absMiddle" border="0" src="/Portals/19/Images/Colour_BeeSting.gif" /></a></li>
</ul>
<h3>CHANGE THE FONT!</h3>
<ul>
<li><a id="css-arialTimes" href="#arialTimes"><img height="41" alt="Arial Times" hspace="0" width="167" align="top" border="0" src="/Portals/19/Images/Font_ArialTImes.gif" /></a></li>
<li><a id="css-timesLucinda" href="#timesLucinda"><img height="41" alt="Times Lucinda" hspace="0" width="167" align="top" border="0" src="/Portals/19/Images/Font_TimesLucinda.gif" /></a></li>
</ul>