Solved

IE CSS/JS Problem

Posted on 2006-07-03
6
865 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:TheKenman
  • 4
6 Comments
 
LVL 23

Expert Comment

by:apresto
ID: 17032030
what version of IT are you using?

Javascript compatability varies from borowser to browser
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17032103
Using IE 6.
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17032463
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.
0
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 
LVL 7

Author Comment

by:TheKenman
ID: 17032467
Stupid IE, why must MS reinvent the wheel (when it's already been invented)...
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 250 total points
ID: 17033314
What you need is this:

#tabs a.tabActive:visited
{
    color: #99ccff;
    background: #000099;
}
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17033429
Wonderful, thanks!
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question