?
Solved

IE CSS/JS Problem

Posted on 2006-07-03
6
Medium Priority
?
871 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 1000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
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 dynamically set the form action using jQuery.
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).

719 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