rollover cell works in IE but not in FF, HELP!!!

hi all,

i'm just fooling around and i'm trying to learn how to use html and css and making sites that are browser compatible...

can somebody tell me why the rollover effects do not happen in Firefox, but do happen in Internet Explorer? and what can i do about it?

here's the online page (http://users.telenet.be/ansatsu/test.html)

and here's a piece of my css code:

td.nav a {
display:block;
background-color:#ced130;
font-size:13pt;
font-weight:bold;
color:#66680c;
text-decoration:none;
height:29px;
padding-left:35px;
padding-top:5px;
background-image:url(images/ornament.gif);
background-position:left;
background-repeat:no-repeat;
}

td.nav a:hover {
background-image:url(images/ornamentover.gif);
background-color:#6e7004;
color:#ced130;
}


tnx a lot for taking the time to help me guys (and girls)...

kind regards

 

You've chosen to position nearly everything with absolute and relative, a generally not good thing. The overlapping elements are masking one another, which is correct behavior.

Try this

#left {
    z-index: 2;
    …
    }

#uppergreenbar {
    z-index: 3;
    …
    }

#lowergreenbar {
    z-index: 3;
    …
    }

Code (markup):

cheers,

gary

 

tnx a lot man, i had never heard about z-index, guess i should read some more tutorials on css and html coding...

everything works fine now... tnx a lot!!!