How can I change the value in a css class?
For instance, with I.E., I want to change the value in the class
span.arr from middle to 0.2em. The value of middle is OK for most
other browsers.
I expected the code below to work but I.E. does not like it.
What should I be doing?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=is o-8859-1">
<title>Chemic al Formula Display</title>
<style type="text/css"><!--
body {font-size: 12pt}
p, ol {font-size: 12pt; margin-top: 0.2em; margin-bottom: 0.4em}
h1 {font-size: 18pt}
sub {vertical-align: bottom; font-size: 9pt}
sup {vertical-align: top; font-size: 9pt}
span.arr {vertical-align: middle;}
-->
</style>
<script type="text/javascript"><!--
if (navigator.appN ame == "Microsoft Internet Explorer")
changeStyle("sp an.arr", '0.2em')
else
changeStyle("sp an.arr", 'middle');
function changeStyle(cla ssNme, newContent)
{
var ssheet = document.styleS heets[0];
var ruleList = (typeof ssheet.cssRules != "undefined" ) ?
ssheet.cssRules : ((typeof ssheet.rules != "undefined" ) ? ssheet.rules
: null );
if (ruleList)
for (var i = 0; i < ruleList.length ; i++)
{
if (ruleList[i].selectorText.t oLowerCase() == classNme)
{
ruleList[i].style.vertical-align = newContent;
break;
}
}
}
// -->
</script>
</head>
<body style="text-justify-trim:punctuatio n" lang="EN-GB">
<h1>Chemical Formula Display</h1>
<p>Netscape requires the arrows to be vertically aligned in
the 'middle' but I.E. wants them to be aligned at 0.2em</p>
<p>(I) H<sub>2</sub>SO<sub>4</sub> + Zn <span
class="arr">&hA rr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p>(I) H<sub>2</sub>SO<sub>4</sub> + Zn <span
class="arr">&ra rr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p style="margin-top=4em"></p>
</body>
</html>
