My CSS code is working in CHROME but not working in FIREFOX :(

My site is www.gayward-concepts.com

At the bottom left of my site, there is a section for POPULAR LINKS that scrolls upward when hovered.

In Google Chrome, it works good and elegant.
But in Firefox, I do not see anything at all.

Can somebody tell me how to make my CSS work in firefox? My css code is as follows:

.popLinkThumbnail{
float: left;
margin-left: -35px;
width: 30px;
height: 30px;
}

.popLinkSidewrap{
float: left;
}


#popLinkSide{
position: fixed;
top: 620px;
background: #fff;
clear: both;
width: 200px;
height: 600px;
z-index: 99999;
border: 1px solid;
padding: 5px;


-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-o-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-o-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;


-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#popLinkSide ul{

list-style: none;
text-align: left;
}

#popLinkSide ul li{
border-bottom: 1px dotted;
margin-bottom: 10px;
height: 40px;
}

#popLinkSide:hover{
top: 200px;
width: 200px;
margin-right: 100px;
}
#popLinkSide ul li a{
color: green;
}

#popLinkSide ul li a:hover{
color: #0099ff;
background: #dff3ff;
}

#popLinkSide ul li:hover{
background: #dff3ff;
}

I am thinking if there is something I must add in my codes to make it work in firefox. I believe there is nothing wrong with my code since it is working in Chrome.

Any response is appreciated. Thanks!

 

Dear green, right now i am using Firefox Beta version (4). I have check your scroll and it is working perfectly