Forum Moderators: open
I have a single row table where each cell is a nav button. I use Javascript to change the <td> backgrounds like this:
var cols = new Array(9);
cols[1] = "#A6A6C3";
cols[2] = "#AA9AC0";
cols[3] = "#B68DBE";
cols[4] = "#BC80AC";
cols[5] = "#BB7289";
cols[6] = "#BA6C63";
cols[7] = "#BA8954";
cols[8] = "#BBB444";
function over(elem)
{
myObj = document.getElementById(elem).style;
myObj.backgroundColor = "#FFFFFF";
}
function out(elem)
{
myObj = document.getElementById(elem).style;
myObj.backgroundColor = cols[elem];
}
Called like this:
<a href="link" onMouseOver="over(2)" onMouseOut="out(2)">website design</a>
The background is initially set by CSS.
You can see the page here:
The problem is this:
The page works fine in IE6 and in Mozilla 1.6. For some reason though, when you load it in Firefox all the <td>s are initially blank white, no text either, until you move the mouse over them for the first time. Is there something wrong with my code or is it a browser bug?
Two, you could probably do this more easily using straight CSS, no JavaScript, with :link and :hover pseudo-classes.
td#1 { background-color: #A6A6C3; border-right: 1px solid #8F8F8F;}
td#2 { background-color: #AA9AC0; border-right: 1px solid #8F8F8F;}
etc.,...
Actually I initially set it up using the pseudo classes as you say. I had something like:
div#banner a {color: white; width: 100%; height: 100%, margin: 0}
div#banner a:visited {color: white}
div#banner a:hover {color: #636569; background-color: white;}
The idea being that the background to the anchor elements would change on rollover. This worked fine in IE. But in Mozilla the background to the <a> elements refused to extend to the full size of the containing <td>, even though I had done the following:
Set <a> width and height to 100% and no margin
Set <td> to 0 padding
Set cellspacing = 0 for containing table
I might have been able to play with the padding on the <a> elements to get it right I guess. But anyway the main thing was that the behaviour in Firefox was the same as in my original post: blank white <td>s when the page first loads.
Actually I guess you must be right. It must be something to do with my CSS as I get the same problem whether I use Javascript or not. It would be nicer to use CSS if I can. Any ideas? Something wrong with my CSS?
negative: This may run into other compatibility problems. The last time I tried this with Konqueror it actually crashed.
positive: If can be shown to be OK, it just makes so much sense.
Perhaps both should be tried. I'll move in the JS direction for the moment...
thesheep, you are using id's that start with (or rather are) numbers. Strictly speaking, this is not allowed. Here's my 2 cents. Use the link itself as the argument in your rollover function calls eg:
onMouseOver="over([blue]this[/blue])"Now these are the functions:
function over(link)
{
link.parentNode.style.backgroundColor = "#FFFFFF";
}
function out(link)
{
link.parentNode.style.backgroundColor = "";
}
Notice that the array of BG colours isn't needed. This is because over() gives the
#ffffffProbably a good idea to change your ids from 1,2,3 to c1,c2,c3 - for instance. (& don't forget the stylesheet rules)
These changes may not solve your Firefox problem, but they are "a good idea" anyway.
- Nice-looking page too.
But in Mozilla the background to the <a> elements refused to extend to the full size of the containing <td>
Strictly, an <A> is an inline element, so it's height can't be specified (or something). IE ignores this. For Mozilla try:
a {display:block;height:100%; ...} [or {display:inline-block; ....}]Probably best to narrow down the field. Either give those links a class, or try contextual selection:
td a {display:block; ....}( I just can't keep up today )
Changing the id from numbers to letters fixed Firefox.
Setting <a>s to display: block fixed the size problem in Mozilla.
I'll go back to the CSS version.
