Firefox ignoring text-decoration:none for <li>? Text of <li> is only clickable?

[GloStix]

For some reason, FF likes to put a black underline on all my buttons.
No matter what I do, it has the line
I've tried displaying as block and cursor, anything..
Also I've been trying to get it so the entire block is clickable, not just the text.
I've sorta got it so it's clickable, just some parts of the button I still can't click on.

The website is http://pdhtdev.johnabbott.qc.ca/stud...olio/index.htm

The css that is relvant to my buttons...

 
 
a {
    color:#CC9900;
    text-decoration:none;
}
 
a:visited {
    color:#CC9900;
    text-decoration:none;
}
 
a:hover {
    text-decoration:underline;
}
 
 
 
 
/*NAVIGATION*/
 
ul a,a:visited,a:focus {
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
    display:block;
}
 
 
 
ul,li,a ul, a li {
    text-decoration:none;
}
 
#sidebar {
    float:left;
    display:block;
    border:solid 1px #333333;
    height:150px;
    width:150px;
    overflow:auto;
    position:absolute;
}
 
#topbar {
    width:100%;
    height:30px;
    font-family:Verdana;
    font-variant:small-caps;
    text-decoration:underline;
    font-style:italic;
    background-color:#353535;
    background-image: url(images/button3.gif);
    overflow:hidden;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #333333;
}
 
#buttonconatiner {
    width:1100px;
    height:30px;
    margin:0 auto;
    overflow:hidden;
 
}
 
#buttons {
    margin:0 auto;
    height:30px;
    width:700px;
    text-align:center;
    overflow:hidden;
}
 
#buttons ul {
    height:30px;
    float:none;
    clear:both;
    padding:0px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    overflow:hidden;
}
 
#buttons li {
    padding-top:3px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    height:30px;
    width:140px;
    text-align:center;
    list-style-type: none;
    float:left;
    display:block;
    overflow:hidden;
    cursor:pointer;
}
 
.selected, .selected a {
    color:#e1a902;
    overflow:hidden;
    background-repeat:repeat-x;
    cursor:pointer;
    }
 
#buttons li:hover {
    background-image: url(images/button3sel.gif);
    height:30px;
    width:140px;
    text-decoration:underline;
    overflow:hidden;
    cursor:pointer;
    display:block;
}
 
 
 

The version that I linked too is an older version where the links aren't blocked so you can't tell just from that version, the css I posted is the latest version.

The CSS has been validated also and it's passed.

[drhowarddrfine]

#buttonconatiner ?
In #topbar, you are setting text-underline and that's where it comes from. Firefox is correct.

To get the links to fit inside the li, add display:block to the <a>

[GloStix]

#buttonconatiner ?
In #topbar, you are setting text-underline and that's where it comes from. Firefox is correct.

To get the links to fit inside the li, add display:block to the <a>

Man you're the best. I bet you've seen my site like 4 times now xD

I can't believe I missed that one.