CSS menu changes sizes

[sirlink99]

I have a css menu that changes sizes for no apparent reason. This is my whole css code

style.css:

body {
	background: url('Images/testBackg.jpeg') 50% 50% no-repeat;
}

#images{
	margin-top:10px;
	margin-bottom:10px;
}

#labelId {
	float:left;
}

#inputId {
	float:right;
}

#contactForm {
	max-width:50%;
	min-width:50%;
}

#headerWrap {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 90%; 
	height: 7%;
	background: url('Images/header.gif') no-repeat;
}
#headerWrap img {
	width: 100%;
	height: 150px;
	height: 7%;
}

#footer {
	margin-left: auto;
	margin-right: auto;
	height: 12%;
	width: 90%;
	background: black;
	color: gray;
}
#footer p{
	font-size: 8px;
}

#container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0;
	padding-bottom: 30px;
	color: #000000;
	width: 90%;
	background-color: white;

}

#containerNoCol {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	color: #000000;
	width: 90%;
}


.background {
	background-color: black;
}

#grayCol {
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: gray; 
}

* { margin: 0; padding: 0;}
 

#navMenu {
	background-color: gray;
	width: 100%;
}
 
#navMenu ul {
	background-color: gray;
	list-style-type: none;
}
 
#navMenu ul li {
	width: 16.66666666666666666666%;
	background-color: gray;
	float: left;
}
 
#navMenu ul ul {
	width: 100%;
	visibility: hidden;
	position: absolute;

}
 
#navMenu ul li a {
	background-color: gray;
	width: 100%;
	height: 30px;
	text-align: center; 
    display: block;
  	font-family:"Arial", cursive;
	text-decoration: none;
	color: white;
	border: 1px solid black;
	
}
 
#navMenu ul li:hover ul {
	visibility: visible;
}
 
/*Change color on hover*/
#navMenu a:hover {
	background: blue;
}
 
#navMenu li:hover {
	color: white;
	background-color: blue;
}


 
/* hover for link items */
#navMenu ul li:hover ul li a:hover {
	color: white;
	background-color: red;
}
 
 
.clearFloat {
   	clear:both; 
}

/* Menu Starting*/
/*
#navMenu {
	margin: 0;
	padding: 0;
	width: 100%;
}

#navMenu ul {
	margin: 0;
	padding: 0;
	height: 30px;
}

#navMenu li {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: gray;
}
#navMenu ul li {
	width: 25%;
}

#navMenu ul li a{
	text-align:center; 
    height: 30px;
    width: 100%;
    display:block;
    color:#000;
    font-family:"Arial", cursive;
    text-decoration:none;
    color: white;
    border:1px solid black;
	
}

#navMenu ul ul {
	position: absolute;
	visibility: hidden;
	
	top: 32px;
}

#navMenu ul li:hover ul {
	visibility: visible;
	width: 400%; /*Makes it so that the item takes up as large of a space as the main products area*/
}
/*Change color on hover*/
/*
#navMenu a:hover {
	background: purple;
}

#navMenu li:hover {
	color: white;
	background-color: blue;
}


/* hover for link items *//*
#navMenu ul li:hover ul li a:hover {
	color: white;
	background-color: red;
}



.clearFloat {
    clear:both; 
    margin: 0;
    padding:0;
}
 
 /*end of menu*/

/*div>div>div { display: inline;}*/

and here is the html code for my menu

<div id="containerNoCol" align="center"> <!-- holds menu div>
        <!-- Menu Divider -->
        <div id="navMenu" align="center">
             <ul> <!-- main ul -->
             	<li><a href="index.html">Home</a></li>
             	<li><a href="about_me.html">About Me</a>
       	      	<li><a href="">Rates</a></li> <!-- end of about -->
             	<li><a href="qna.html">Q&A</a></li> <!-- end of contact -->
             	<li><a href="contact.html">Contact</a></li>
               <li> <a href="#">Testimonials</a></li>
             </ul> <!-- end main ul -->
      	
        </div> <!-- end of Menu divider -->
   </div> <!-- end of holds menu div -->

This happens in firefox. When I run it in opera the menu isn't quite long enough. IE just destroys the whole website (header doesn't show, menu goes to a new line). How could I fix these problems? I am still a beginner. Thanks for any help.

[almostbob]

redo the css remove all references to 0px, 0 is just zero, the only dimension that is dimensionless 0px=0em=0pt=0cm=0in === 0 browsers often misinterpret dimension errors
not suggesting this is the exact cause, but removing any possible impediment, havent even read all the way through the code yet, only noticed the first 0px

[sirlink99]

I changes all 0px to 0 and it still didn't work. The menu still changes size in firefox. the menu is still smaller in opera, and the menu still goes to a new line in IE. thanks for the help.