CSS className changing isn't working in Firefox

HTML & CSS
1

Hello, I’m currently changing the appearance and position of DIV elements by reassigning their class on the fly using onmouseover events attached to other DIVs.

For example a DIV with ID “arrow” will be assigned the arrow1 class by default as defined here:

.arrow1 {
position:absolute;
width:6px;
height:16px;
z-index:1;
left: -18px;
top: -1px;
}

which will then change to the arrow2 class as defined here:

.arrow2 {
left: -18px;
top: 16px;
}

when the user places the mouse cursor over another DIV altogether… with code like this:

<div id=“button” onmouseover=“arrow.className=‘arrow2’”></div>

This works just fine in chrome and internet explorer, but does not work in Firefox - similarly I can’t get any onclick events to work either - even though they’re fine in Chrome and IE.

Any help would be appreciated.

2

it would help if you post all the html and javascript.

with just the posted code we (or at least me ;)) can’t tell how the object named arrow in

 
arrow.className='arrow2'

is defined

edit: and don’t forget to wrap any posted code in code tags - the # button in the editor’s toolbar

3

Apologies, and thanks for the quick reply.

I will post a different example (but same problem) in it’s entirety

Here, a DIV called “button” will make a hidden DIV called “information” become visible by changing its class from “.info” to “.info2” - again this works in IE and Chrome but not FF.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<style type=“text/css”>
<!–
#button {
position:absolute;
width:87px;
height:83px;
z-index:1;
left: 203px;
top: 133px;
background-color: #666666;
}

.info{
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:hidden;
}
.info2 {

position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:visible;

}

–>
</style>
</head>

<body>
<div id=“button” onclick=“information.className=‘info2’”></div>
<div class=“info” id=“information” onclick=“this.className=‘info’”>
<p>information</p></div>
</body>
</html>

4

your problem is in this line

 
 
<div id="button" onclick="information.className='info2'"></div>

To change the property of an element (object) the general syntax is:

objectReference.property = ‘some value’;

In your code, information in information.className is not an object datatype but simply the id of an object.

To get an object reference for an object with an id you can use document.getElementbyId()

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#button {
position:absolute;
width:87px;
height:83px;
z-index:1;
left: 203px;
top: 133px;
background-color: #666666;
}
.info{
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:hidden;
}
.info2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 406px;
top: 121px;
visibility:visible;
}
-->
</style>
</head>
<body>
 
<div id="button" onclick="[COLOR=red]document.getElementById('information').className='info2'[/COLOR]"></div>
 
<div class="info" id="information" onclick="this.className='info'">
<p>information</p></div>
 
</body>
</html>
5

Kalon thank you very much!