Solved

IE CSS/JS Problem

Posted on 2006-07-03
6
869 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

737 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