Solved

IE CSS/JS Problem

Posted on 2006-07-03
6
864 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
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 …
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now