little problem changing css class with javascript
-
Hello everyone, I have a table set up to look like a box with 4 tabs. There are two classes of tabs, tabactive and tabinactive. tabactive has a white background, black border on the top, left, and right, and a white border on the bottom. tabinactive has a gray background, and a black border on all sides. The problem I'm having is that in Firefox when I click the link that activates the javascript function to change the class of the table cell/tab, the background color changes correctly but the bottom border change doesn't always stick. I'll get tabactive tabs with black bottom borders, and tabinactive cells with white bottom borders - everything else works fine. Oddly enough, this only seems to happen for the last 2 cells/tabs (see HTML below). Here's my CSS: .tabactive { border: solid 1px black; border-bottom: solid 1px white; background-color: #FFFFFF; text-align: center; padding: 0px; margin: 0px; } .tabinactive { border: solid 1px black; border-bottom: solid 1px black; background-color: #CCCCCC; text-align: center; padding: 0px; margin: 0px; } Here's my javascript: /* set visibility of divs and change bg color of tabs */ function TabClick(LinkName) { for (var x = 1; x < 5; x++) //only allows for 4 tabs right now { TabID = "Tab" + x //assign names w/ increment that match elements DivID = "Div" + x //i.e. Tab1, Div2, etc Tab = document.getElementById(TabID) //grab elements Div = document.getElementById(DivID) if (TabID != LinkName) //set style and vis of unselected tabs + divs { Tab.className = "tabinactive" Div.style.visibility = "collapse" Div.style.display = "none" } else //set style and vis of selected tabs + divs { Tab.className = "tabactive" Div.style.visibility = "visible" Div.style.display = '' }//end else }//end for }//end function Here's my HTML (note that this happens almost exclusively on Tab3 and Tab4):
This is Div1.
Thi