I'm building a website for my church, and I'm teaching myself all about web design along the way.

http://www.wilmingtonchurchofgod.org/contact_us.html is the link where you can see my issue.

If you look at that page in firefox, and you click the select part of the form (next to, "Who would you like to contact?") you will see that when you hover over a choice, the font is white. I have tried various things to fix this, but can't find a solution. This seems to be specific to Firefox.

Here is the relevant CSS.

input, textarea, select, option{  
padding: 6px; 
border: solid 1px #E5E5E5;  
outline: 0;  
font: normal 13px/100% Verdana, Tahoma, sans-serif;  
width: 200px;  
background: #FFFFFF url(images/from-grad.jpg) left top repeat-x;  
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%,     #EEEEEE), to(#FFFFFF));  
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);  
box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
-moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
}

option{
    padding:0px;
}

textarea {  
    width: 400px;  
    max-width: 400px;  
    height: 150px;  
    line-height: 150%;  
}  

input:hover, textarea:hover, 
input:focus, textarea:focus{  
    border-color: #C9C9C9;  
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
} 

option:hover, option:focus, 
select:hover, select:focus {

color: black; border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; }

Another side note is that I can't get any background gradient at all to show up on Google Chome (yet it does on Safari and they are supposed to use the same kit?)

Any help with these two things would be greatly appreciated.