I'm having trouble with, I think, an inheritance issue with IE6.
In the following html, I create buttons out of two spans, style them
differently and use a script to activate them.
Firefox agrees with me that the buttons should have different .up,
.over, and .down styles, but IE6 does not. It seems to be applying only
the last styles listed to both buttons.
Can anyone explain how to get IE to "see" the differences in the span
classnames?
Thanks!
<!--<?xml version="1.0" encoding="ISO-8859-1"?>-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html>
<head>
<title>Button Test</title>
<style>
.type2
{
cursor:hand; cursor:pointer;
font: bold 11.5px Tahoma;
white-space:nowrap;
margin:0 .25em 0 0;
text-align:center;
display:inline;
vertical-align:middle;
padding: 4px 3px 4px 20px;
border-width: 1px;
border-style: solid;
}
.type2.up
{
color: rgb(0,0,0);
background-color: rgb(255,255,255);
border-color:rgb(255,255,255);
}
.type2.over
{
color: rgb(0,0,0);
background-color: rgb(255,255,255);
border-left-color: rgb(204,204,204);
border-top-color: rgb(204,204,204);
border-right-color: rgb(102,102,102);
border-bottom-color: rgb(102,102,102);
}
.type2.down
{
color: rgb(0,0,0);
background-color: rgb(230,230,230);
border-right-color: rgb(204,204,204);
border-bottom-color: rgb(204,204,204);
border-left-color: rgb(102,102,102);
border-top-color: rgb(102,102,102);
}
.type1
{
cursor:hand; cursor:pointer;
font: bold 11.5px Tahoma;
white-space:nowrap;
margin:2px;
width:6em;
text-align:center;
display:inline;
vertical-align:middle;
padding: 2px 3px;
border: 1px solid black;
}
.type1.up
{
color: rgb(0,0,0);
background-color: rgb(255,255,255);
border-color: rgb(0,0,0);
}
.type1.over
{
color: rgb(0,0,0);
background-color: rgb(240,240,240);
border-color: rgb(204,102,0);
}
.type1.down
{
color: rgb(0,0,0);
background-color: rgb(192,192,192);
border-color: rgb(204,102,0);
}
</style>
</head>
<body>
<span class="button type1 up">View</span>
<span class="button type2 up">Profiles</span>
<script>
function addButtonHandlers(whichTag) {
var isAButton = new Array();
var couldBeAButton = document.getElementsByTagName(whichTag);
for (var i = 0; i < couldBeAButton.length; i++) {
if(couldBeAButton[i].className.search("sticky") == -1) {
if (couldBeAButton[i].className.search("button") != -1) {
couldBeAButton[i].onmouseover = function() {
this.className = this.className.replace("up","over");
return false;
}
couldBeAButton[i].onmousedown = function() {
if(this.className.search("over") != -1) {
this.className = this.className.replace("over","down");
}
if(this.className.search("up") != -1) {
this.className = this.className.replace("up","down");
}
return false;
}
couldBeAButton[i].onmouseup = function() {
this.className = this.className.replace("down","up");
return false;
}
couldBeAButton[i].onmouseout = function() {
if(this.className.search("over") != -1) {
this.className = this.className.replace("over","up");
}
if(this.className.search("down") != -1) {
this.className = this.className.replace("down","up");
}
return false;
}
}
}
}
}
window.onload = function() {
addButtonHandlers("span");
}
</script>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
