asked on

IE CSS/JS Problem

Greetings,

This page works as intended in Firefox 1.5, and for the most part in IE, the only problem being that when a tab is clicked, it does not take on the 'tabActive' CSS class. Can anyone point out what I'm missing?

<html>
<head>
<style>
#tabs a, #tabs a:link, #tabs a:visited {
      text-decoration: none; COLOR: #000099; BACKGROUND: white; BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 2px; MARGIN: 0px; FONT: bold 11px verdana; BORDER-LEFT: #000099 1px solid; CURSOR: hand; BORDER-BOTTOM: #000099 1px solid; TEXT-ALIGN: center;
}

#tabs a:hover, #tabs a.tabActive:hover {
      COLOR: white; BACKGROUND: #000099;
}

#tabs a.tabActive {
      COLOR: #99ccff; BACKGROUND: #000099;
}
#tabCnt1, #tabCnt2, #tabCnt3 {display: block;}
</style>

<script language="javascript">
function getbyID(obj) { // lazy getElementById();
return document.getElementById(obj);
}

function last(str) { // return last char from a string
return str.substr(str.length-1);
}

function set_div(idTab,bState) {
return getbyID(idTab).style.display = bState ? 'block' : 'none';
}

function set_tab(idTab,bState) {
return getbyID(idTab).className = bState ? 'tabActive' : 'tab';
}

function set_all(bState) {
var x = getbyID('tabs').getElementsByTagName('a');
for (i=0;i<=x.length-2;i++) {
set_div('tabCnt'+(i+1),bState);
set_tab(x[i].id,false);
}
set_tab('allTabs',bState);
return true;
}

function select_tab(idTab) {
if (idTab == 'allTabs') {
set_all(true);
} else {
set_all(false);
set_div('tabCnt'+last(idTab),true);
set_tab(idTab,true);
}
}
</script>
</head>
<body>
<div class="vtable" id="tabs" unselectable="on">
<a class="tab" id="tabNum1" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">General</a>
<a class="tab" id="tabNum2" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">Hardware</a>
<a class="tab" id="tabNum3" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">Software</a>
<a class="tab" id="allTabs" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">All Tabs</a>
</div>
<div id="tabCnt1" class="asdf">General</div>
<div id="tabCnt2" class="asdf">Hardware</div>
<div id="tabCnt3" class="asdf">Software</div>
</body>
</html>

apresto

what version of IT are you using?

Javascript compatability varies from borowser to browser

TheKenman

ASKER

Using IE 6.

TheKenman

ASKER

Odd, if I remove the HREF from the <A>, then the tabActive sticks, however the :hover breaks as does the cursor:hand. I guess I could script the mouseover but I'd like to keep that in CSS if possible.

TheKenman

ASKER

Stupid IE, why must MS reinvent the wheel (when it's already been invented)...

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TheKenman

ASKER

Wonderful, thanks!