My guess: I can only say that, !important rules are ignored on stylesheets linked using js.(no speculations!)
Without much fuss, some code snippet. Sorry for not being able to host this on a site
The html block
<?xml version="1.0" encoding="UTF-8"?>
<!--
Document : longdiv
Created on : 06-Sep-2008, 09:59:00
Author : kanthi swaroop
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO supply a title</title>
<link type="text/css" rel="stylesheet" href="../css/demo.css"/>
<script src="../js/adjustLayout.js">
</script>
</head>
<body>
<div id="header">
Some space
</div>
<div class="outer">
<div class="left">
<span id="long">
longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____
</span>
<span id="short">
The plain stuff
</span>
</div>
<div class="right">
DON'T__BLOCH__ME____DON'T__BLOCH__ME____DON'T__BLOCH__ME____DON'T__BLOCH__ME
</div>
</div>
</body>
</html>
There are two files, demo.css and override.css, using js we attempt try to include the override.css when necessary. override.css applies only to standard compliant browsers.
demo.css
/*
Document : demo
Created on : 06-Sep-2008, 10:06:20
Author : kanthi swaroop
Description:
This stylesheet is supposed to be overridden in special cases via java script.
*/
* {
margin : 0;
padding : 0;
color : #000000;
}
/*
#long{
display:none;
}
#short{
display:block;
}
/*
*/
#long{
display:block;
}
#short{
display:none;
}
root, div {
display: block;
border : 1px solid #000000;
}
body {
font-size: 62.5%;
font-family: Arial,Helvetica,sans-serif;
height: 100%;
background-color: #9999ff;
}
div, span {
font-size: 110%;
}
span {
background-color:orange;
display: inline;
}
body, .outer{
margin: 0 auto;
width: 1024px;
}
.outer {
position: absolute;
height:100%;
overflow:auto;
background-color: #999999;
}
.left {
float: left;
}
.right {
float: right;
}
.left, .right {
/*height: 10em;
*/
height: auto;
width: 49%;
}
override.css
/*
Document : override
Created on : 06-Sep-2008, 11:12:35
Author : kanthi swaroop
Description:
The following are to be overriden only for standard compliant browsers.
I know, I am using !important.
*/
.left, .right {
width:100% !important;
clear: both !important;
_width:49%;
_clear: none;
}
Java script
Some java script.
/*
The script part
Author: kanthi swaroop
*/
window.onload = function adjust(aEvent){
aEvent = aEvent || window.event;
var newLink = document.createElement("link");
newLink.href = "../css/override.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
var hasChildren = document.body.hasChildNodes();
if(hasChildren) {
document.body.insertBefore(newLink, document.body.firstChild);
}
else {
document.body.appendChild(newLink);
}
alert("Bye");
};
Posts
No comments:
Post a Comment