css horizontal hover-effect list: problem with firefox browser

I'm recoding my website in css and have run into trouble with the horizontal hover-effect menu list.

Problem: list works in chrome & explorer but firefox collapses the list + shows buttons out of order.

here's the example: http://www.deadlyvintagesweets.com/dindex.htm

I used a simple list --- resourced from from A List Apart's CSS design - Taming Lists http://www.alistapart.com/articles/taminglists/.

The CSS
----------------------------------------------------------------------
 

Center Text In Image for Menu Button

I am trying to center my text in an image for a menu button and I can't seem to get it to work. I have the text centered left to right but not up and down. What would be the code to do this?

CSS:

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: #333;
	background-repeat: repeat;
	font-size: 100%;
	color: #FFF;
	letter-spacing: 0.2em;
	vertical-align: center;
}
 
.center
{
margin:auto;
width:1024px;
}
 
 
#wrapper {
	background-color: #603;
	height: 629px;
	width: 1024px;
	vertical-align: center;
	horizontal-align: center;		

Put image in Background without cutting anything up

I am trying to put an image, not in the background but in the menu bar and the buttons for the menu bat lay on top of it but I dont know how to do it.

http://i1128.photobucket.com/albums/m487/cranegamelia/1.jpg

This is the basic idea. See the red behind the menu bar? That is what I am trying to acomplish without cutting everything into little pieces.

I just started coding yesterday for the first time so if there are things odd about it that is why.

HTML:

Weebly website creator css

I have created a website using weebly and would like to fix my navigation bar so that it is visible as you scroll down the page. ive looked on other websites but cant see how to apply it to my website. can anyone help please.

This is mycurrent css. Sorry about the length.

*|* {
  margin:0pt;
  padding:0pt;
}
body {
  background: transparent url(bg_custom.jpg) repeat-x center top;
  background-color:#fff;
  font-family:"lucida sans", verdana, arial, sans-serif;
  font-size:13px;
  color:#666666;
  margin:0;
  padding:0;
}
p {
  line-height:1.5;

Navigation menu with images

Hi Guys,
I am new in this forum and hope I am posting my topic on the right thread Smile
I am trying to do a navigation menu with images on top of the navigation headings. I am having difficulties when try to centre both the text and images in the navigation menu. I want to spread the headings (and images) across the 990px width. Please find below the code and appreciate feedback how to arrange and centre the images and text headings.

The html code:

</head>
<body>
    	<div id="navigation">														
    		<div class="navigation-headings">
				<ul>
					<li>

Syndicate content