CSS - Ie - Text Missing From Navbar Sub-menus

a.navbar:link {
	display:block;
	position:absolute;
	height:25px;
	width:150px;
	background-color:#FFCC99;
	top:40px;
	left:0px;
	z-index:1;
}

<div>
<span id="navcontainer1" class="button1">
<ul>
<li>
<a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span>

<span id="navcontainer2" class="button2">
<ul>
<li>
<a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer3" class="button3">
<ul>
<li>
<a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer4" class="button4">
<ul>
<li>
<a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer5" class="button5">
<ul>
<li>
<a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li>
</ul>
</span></div>

.button1 {
position: relative;
bottom: 100px;
right: 40px;
}

#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}

#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}

.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}

#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}

.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}

#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}

.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}

#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}

.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one. 
left: 520px;
}

#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}

#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}

#navbar ul { 
		margin: 10px auto auto auto; 
		padding: 6px; 
		list-style-type: none; 
		text-align: left; 
		background-color: #000;
		font-family: arial;
        } 

#navbar ul li {  
		display: inline; 
		font-family: arial;
        } 

#navbar ul li a { 
		text-decoration: none; 
		padding: .2em 1em; 
		color: #ffffff; 
		background-color: #000000; 
		font-family: arial;
        } 

#navbar ul li a:hover { 
		color: #000000; 
		background-color: #ffffff; 
		font-family: arial;
        } 

<div id="navbar"> 
	<ul> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="irc.html">IRC</a></li>
		<li><a href="about.html">About</a></li>		
		<li><a href="contact.html">Contact</a></li> 
	</ul> 
</div>

#contact_nav a {border:none;} /*Removes right border on end of navbar*/