h2 firefox issue

Hi all I have problems with firefox and h2 at the mo I have a side column like this

-

When i load it in fire fox all the <h2> eithe dont show up or group at the top !

.sidebarhead{
width:170px;
height:30px;
background-image:url(/dev/images/sidebar.jpg);
position:relative;
margin-top:0px;
margin-bottom:0px;
}

.sidebarhead h2{
font-size:18px;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
font-family: arial;
font-style: normal;
color:#fff;
}



.sidebarlist{
list-style:none;
border: 1px solid #000;
float:left;
margin:0px;
font-family:arial;
font-size:14px;
width:170px;
background-color:#f3f3f3;
margin-bottom:10px;
padding:10px;
font-family:arial;
font-size:14px;
position:relative;
}

.sidebarlist li{
padding-bottom:5px;
list-style:none;

}

<div class="sidebarhead"><h2>TITLE</h2></div>
   <ul class="sidebarlist">
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
<li><a href="http://***" title="***">***</a>
</ul>

HTML:

 

Just tried it here in Firefox 2 and the h2 text is there... problem is that it is white, same as the page color.

I just changed:

to

Now you can see it nice and clear...