Hi List,
I have this strange situation here. I've found a way to solve the issue but
anyway I still whant to know what triggers this problem.
I have two documents with the following structure:
1.
<body class="bg">
<div id="Body" class="sunny">
</div>
</body>
and 2.
<body class="bg">
<div id="Body" class="cloudy">
</div>
</body>
The only difference is the class of the #Body element.
And have the following css:
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
The issue is that the third rule (.bg #Body.cloudy) is not followed by IE and
FF.
If I change the order of the rules in css to
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
.bg #Body.sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
The third rule (.bg #Body.sunny) still doesn't render.
I've fixed that with the following CSS:
#Body {
padding: 20px 0 0 200px;
border-top: 1px solid #fff;
width: 580px;
}
.bg #Body.cloudy {
background: url(/img/bg-ne-stars-bg.gif) 24px 45px no-repeat;
}
.bg .sunny {
background: url(/img/bg-sb-stars-bg.gif) 24px 45px no-repeat;
}
i.e. removed the #Body selector from the third rule and voila - it worked. But
I don't think that there is something wrong with the previous syntax.
Georgi Varzonovtsev
Interaction Designer
Netage Solutions, Inc
----------------------------------
63 Shipchenski Prohod Blvd.
Sofia, Bulgaria
T: (359) (2) 960 6940
(359) (2) 960 6939
F: (359) (2) 960 6924
web.netagesolutions.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
