Hi all,
I know a bit about css and html but haven’t done lots of things using the @import tag.
I am now facing a problem concerning @import in css files that is not being reflected in my UI when switching between css files only when working with IE7&IE8;.
I have managed to reproduce the issue on a very simple example that I have attached here, so that if anyone encountered it it will be very easy to identify.
Here are more details about the scenario:
1. I have a simple index1.html file (see below), that has a css link that its reference is switched dynamically by clicking a button.
<html>
<head>
<link href="style1.css" type="text/css" rel="stylesheet" id="themeStyleSheet">
function changeStyle() {
alert("here");
defaultStyle = "default.css";
importingStyle="style1.css";
ref="default.css";
debugger;
var frameStyleElm = document.getElementById("themeStyleSheet");
if (frameStyleElm != undefined && frameStyleElm != null) {
if( frameStyleElm.href == "default.css"){
ref="style1.css";
}
frameStyleElm.href = ref;
}
}
</head>
<body>
<h1>My First Heading - if this is RED then the import succeeded</h1>
<button onclick="[removed]changeStyle();">click</button>
<p>My first paragraph.</p>
</body>
</html>
2. I have 3 very simple css files: style2.css that colors the headings in red, style1.css that uses @import to import style1.css and default.css.
The style1.css is the one the index1.html is loaded with the first time.
content of style1.css:
@import "style2.css";
body {
background: #FFFBDD;
}
content of style2.css:
h1 { font: bold 120% Arial,sans-serif; color: #FF0000; margin: 0px; padding: 0px; }
content of default.css:
body {
background: #FF0000;
}
3. Here is the problematic scenario (I wnated to attach a zip with the files but it wasnt allowed so all code is basically above):
- load the index1.html into IE8 - > as expected the header will be red because the imported style2.css takes effect.
- click the button-> as expected the style changes to the default css
- click the button again -> this should change the style to the initial one (that is with the red header) , but instead the imported style2.css does NOT take effect and the header is not red.
Note: in IE6 the scenario works as expected whereas in IE7/8 the problematic scenario reproduces.
I thought it is an IE settings issue and dug quite a lot around it but didn’t find a solution, will really appreciate your help…
Thanks
Ora