I have the following javascript function:
function setupABarTables() {
// set classes for Action bar
var vTable = document.getElementsByTagName("Table")[0];
vTable.className = "ABTable";
var ac = vTable.getElementsByTagName("TR" );
for (i=0; i<ac.length;i++) {
ac[i].className = "ABRow";
}
var ac = vTable.getElementsByTagName("TD" );
for (i=0; i < ac.length;i++) {
ac[i].className = "ABCell";
ac[i].onmouseover = function() {this.className = "ieHover";}
ac[i].onmousedown = function() {this.className = "ieClick";}
ac[i].onmouseout = function() {this.className = "ABCell";}
}
}
and the following in my onLoad event:
setupABarTables();
and the following Style sheet…
.ABTable {
margin-top: 0px;
background: #2B5D9F;
}
.ABCell {
font: 8pt Verdana;
padding: 5px 8px 3px 5px;
border: 0;
background-color: #2B5D9F;
line-height: 1.9em;
}
.ieHover, .ieClick {
font: 8pt Verdana;
padding: 4px 7px 2px 4px;
border: 0;
background-color: #DDD;
line-height: 1.9em;
}
.ABCell img, .ieHover img, .ieClick img {
float: left;
}
.ABCell a, .ieHover a, .ieClick a, a:link, a:visited, a:active {
text-decoration: none;
color: white;
}
.ieClick {
border-top: 1pt AAA solid;
border-left: 1pt AAA solid;
border-bottom: 1pt white solid;
border-right: 1pt white solid;
}
.ieHover {
border-top: 1pt white solid;
border-left: 1pt white solid;
border-bottom: 1pt AAA solid;
border-right: 1pt AAA solid;
}
I am using this in my $$ViewTemplate…
It is supposed to find the first table… which is always the action bar and apply some styles to it…
It works great, except that the rest of my links in my view also have the style applied to them as well…
I think it is this part of the style sheet is causing the problem…
.ABCell a, .ieHover a, .ieClick a, a:link, a:visited, a:active {
text-decoration: none;
color: white;
}
but not sure…
By the way, I got this code in an example database that was presented at the DevCon conference in Las Vegas last week.
Can anyone please give me some guidance?
Thanks so much…