navigation moves in Internet explorer 7

[ehart]

Left navigation for website:
Sub list for button "Environmental Health". It is not a drop down just a sub list, of smaller buttons in the Environmental Health. It works in all browsers BUT IE7. It seems that it is not making that space for the sub ul list. In IE8 and 6 it makes that sapce.
Please can some one help?!?!?!?!?


HTML code:
<div id="leftnav">
<ul id="left_button">
<li><a href="environmental_health.html" class="leftbuttons">Environmental Health</a></li>
<ul id="sub_button">
<li><a href="food_services.html" >Food Services</a></li>
<li><a href="on_site_sewage.html" >On-Site Sewage</a></li>
<li><a href="public_pools.html" >Public Pools</a></li>
<li><a href="tourist_accommodations.html" >Tourist Accommodations</a></li>
<li><a href="well_water.html" >Well Water</a></li>
<li><a href="chemical_hazards.html" >Chemical Hazards</a></li>
<li><a href="indoor_air_quality.html" >Indoor Air Quality</a></li>
<li><a href="west_nile_virus.html" >West Nile Virus</a></li>
<li><a href="tick_borne_diseases.html" >Tick-borne Diseases</a></li>
<li><a href="smoke_free_air_act.html" >Smoke free Air Act 2005</a></li>
</ul>
<li><a href="immunizations.html" class="leftbuttons">Immunizations</a></li>
<li><a href="turberculosis.html" class="leftbuttons">Turberculosis</a></li>
</ul>
</div>






CSS code:
#leftnav {
background-color: #63ce28;
font-size: 12px;
list-style-type:none;
width: 190px;
height:auto;
float:left;
line-height:10px;
font-weight: bolder;
}

#leftnav li {
background:url(images/button-left.gif) 0 0 no-repeat;
width:190px;
height:41px;
margin-left:0px;
}

#leftnav img {
border: none;
margin: 0px auto;
}

#leftnav ul li {
width: 190px;
}

#leftnav ul {
margin-left:-40px;
margin-top:0px;
}

#leftnav li a {
text-decoration:none;
color: #14637f;
margin-left: 20px;
margin-top:35px;
}


#sub_button li {
background-color: #ace58d;
width:20px;
height:21px;
line-height:23px;
margin-bottom:2px;
margin-left:10px;
padding-left:10px;
background:url(images/arrow.png) 0 0 no-repeat;
}

[<CrGeary.com/>]

The problem as you said is your navigaiton disapears on the left. This is because of your negative value for margin-left on the #leftnav ul. Im not sure why its doing that, im assuming IE7 simply doesnt like the margin-left you have used. So i cant really give you a way to fix it other than to used a margin on your list-items, rather than the list itself.

Instead i just modified your old css, it may need to be slightly changed for you arrow image, because i dont know how big it is so i couldnt do it for you. Hopefully this fix will suffice. Good luck with your project.


Css



#leftnav {
background:#63ce28;
font-size: 12px;
width: 190px;
float:left;
margin:0px;
padding:0px;
}

#leftnav ul {
margin:0px;
padding:5px;
}

#leftnav ul li {
list-style:none;
}

#leftnav ul li a {
height:22px;
line-height:22px;
margin:0px;
font-weight:bolder;
display:block;
color:#14637f;
text-decoration:none;
}

#sub_button li {
margin-left:10px;
background:url(images/arrow.png) 0 0 no-repeat;
text-indent:15px;
}