By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,931 Members | 1,247 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,931 IT Pros & Developers. It's quick & easy.

How can I change the value in a css class?

P: n/a
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=iso-8859-1">
<title>Chemical 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.appName == "Microsoft Internet Explorer")
changeStyle("span.arr", '0.2em')
else
changeStyle("span.arr", 'middle');

function changeStyle(classNme, newContent)
{
var ssheet = document.styleSheets[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.toLowerCase() == classNme)
{
ruleList[i].style.vertical-align = newContent;
break;
}
}
}
// -->
</script>
</head>
<body style="text-justify-trim:punctuation" 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">&hArr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p>(I) H<sub>2</sub>SO<sub>4</sub> + Zn <span
class="arr">&rarr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p style="margin-top=4em"></p>
</body>
</html>
Oct 18 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
On Tue, 18 Oct 2005 09:04:24 GMT, Harry Haller <Ha***@Steppenwolf.com>
wrote:
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=iso-8859-1">
<title>Chemical 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.appName == "Microsoft Internet Explorer")
changeStyle("span.arr", '0.2em')
else
changeStyle("span.arr", 'middle');

function changeStyle(classNme, newContent)
{
var ssheet = document.styleSheets[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.toLowerCase() == classNme)
{
ruleList[i].style.vertical-align = newContent;
break;
}
}
}
// -->
</script>
</head>
<body style="text-justify-trim:punctuation" 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">&hArr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p>(I) H<sub>2</sub>SO<sub>4</sub> + Zn <span
class="arr">&rarr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>
<p style="margin-top=4em"></p>
</body>
</html>


Sorry, I just noticed it should be:
ruleList[i].style.verticalAlign = newContent;
not
ruleList[i].style.vertical-align = newContent;

Apart from that I have changed all the styles to end with a ;

It works now.
Oct 18 '05 #2

P: n/a
Harry Haller wrote:
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?


Ask in a CSS forum, I suspect there is a pure CSS solution. Any
browser-sniffing method is bound to fail at least some of the time for
some browsers.
comp.infosystems.www.authoring.stylesheets

--
Rob
Oct 18 '05 #3

P: n/a
You can use conditional comments at IE.

Example HTML:
<head>
<style type="text/css"><!--
span.arr {vertical-align: middle;}
--></style>
<!--[if IE]>
<style type="text/css">
span.arr {vertical-align: 0.2em;}
</style>
< ![endif]-->
</head>

This is valid HTML.

Oct 18 '05 #4

P: n/a
Harry Haller wrote:
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.
Have you decided on a solution without really considering the actual
problem?
What should I be doing?
We can tell you, but you might not like it. ;)
<style type="text/css"><!--
Dump the <!-- --> comment tags. They haven't been needed for more than
10 years now.

BTW, it is accepted practice to post the URL of a page showing the
problem. Most people don't want to be bothered to copy and paste your
code and dummy up their own page. Besides, more often than not, the code
alone doesn't tell the whole story.

Make it easy for people to help you and you'll get better results.
body {font-size: 12pt}
If this were a print stylesheet, setting font sizes in pt units could be
acceptable. They are unsuitable for screen display, though. Use % per
published accessiblity guidelines, with body at 100%. Subscripts and
superscripts can be a fraction of that, maybe 75%.
span.arr {vertical-align: middle;}

<p>(I) H<sub>2</sub>SO<sub>4</sub> + Zn <span
class="arr">&hArr;</span> ZnSO<sub>4</sub> + H<sub>2</sub></p>


Seems to me that arrows vertically align by themselves just fine. Why do
you need to specifically set it at all?

BTW, you might want to check out the line-height property.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Oct 18 '05 #5

P: n/a
Once upon a time *Gomolyako Eduard* wrote:
You can use conditional comments at IE.


Who?

For furter ref on how to post on usenet, please read the links in my sig!

--
/Arne
Now killing all top posters and posters who don't quote
* How to post: http://www.cs.tut.fi/~jkorpela/usenet/brox.html
* From Google: http://www.safalra.com/special/googlegroupsreply/
-------------------------------------------------------------
Oct 18 '05 #6

P: n/a
Taked into consideration.

Arne писал(а):
Once upon a time *Gomolyako Eduard* wrote:
You can use conditional comments at IE.


Who?

For furter ref on how to post on usenet, please read the links in my sig!

--
/Arne
Now killing all top posters and posters who don't quote
* How to post: http://www.cs.tut.fi/~jkorpela/usenet/brox.html
* From Google: http://www.safalra.com/special/googlegroupsreply/
-------------------------------------------------------------


Oct 18 '05 #7

P: n/a
kchayka wrote:
Harry Haller wrote:
<style type="text/css"><!--


Dump the <!-- --> comment tags. They haven't been needed for more than
10 years now.


1. They are NOT "comment tags".ss

2. Your statement applies to _`script'_ elements. JavaScript within HTML
has been around since 1994 (NN2).

HTML 4 and CSS have been around since 1999, it is not that unlikely that
there is an installed user agent that does not understand the `style'
element (properly). Since those comments do no harm in HTML (they are
specified in the CSS grammars in contrast to the JS specs) it is
perfectly valid to use them.
X-Post & F'up2 comp.infosystems.www.authoring.html

PointedEars
--
The German psychs, the German authorities, the German secret service agents
are [...] fanatics, they are insane and known of persecuting innocent people
and Scientologists. -- "The only real Barbara Schwarz", dsw.scientology,
<16**************************@posting.google.com >
Oct 21 '05 #8

P: n/a
On Tue, 18 Oct 2005 09:15:51 -0500, kchayka <us****@c-net.us> wrote:
Harry Haller wrote:
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.


Have you decided on a solution without really considering the actual
problem?
What should I be doing?


We can tell you, but you might not like it. ;)


Heh, why won't I like it? Thank you for taking the time to post. I
appreciate it. I will give very careful consideration to everything
you wrote.

Nov 7 '05 #9

P: n/a
On 18 Oct 2005 06:25:38 -0700, "Gomolyako Eduard"
<ed**************@gmail.com> wrote:
You can use conditional comments at IE.

Example HTML:
<head>
<style type="text/css"><!--
span.arr {vertical-align: middle;}
--></style>
<!--[if IE]>
<style type="text/css">
span.arr {vertical-align: 0.2em;}
</style>
< ![endif]-->
</head>

This is valid HTML.


It works with Firefox but with IE the last tag, < ![endif]-->, is
displayed at the top of the document. Although, at least the class is
re-defined for IE.

Below is no better, because the css class re-definition is just
ignored.

<head>
<style type="text/css">
span.arr {vertical-align: middle;}
<!--[if IE]>
span.arr {vertical-align: 0.2em;}
< ![endif]-->
</style>
</head>

Nov 7 '05 #10

P: n/a
On Mon, 07 Nov 2005 13:22:03 GMT, Harry Haller <Ha***@Steppenwolf.com>
wrote:
On 18 Oct 2005 06:25:38 -0700, "Gomolyako Eduard"
<ed**************@gmail.com> wrote:
You can use conditional comments at IE.

Example HTML:
<head>
<style type="text/css"><!--
span.arr {vertical-align: middle;}
--></style>
<!--[if IE]>
<style type="text/css">
span.arr {vertical-align: 0.2em;}
</style>
< ![endif]-->
</head>

This is valid HTML.


It works with Firefox but with IE the last tag, < ![endif]-->, is
displayed at the top of the document. Although, at least the class is
re-defined for IE.


Correction, it is good. I left a space in, < ![endif]-->, where
there should 've been none, <![endif]-->, because I just copied and
pasted from Eduard's code. Silly me.

Nov 7 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.