Item in list is wrapping weird

[ripcurlksm]

Why isn't the "Procedure Volumes" link dropping down to the next line in IE7?

<style>
#reportnavigation {
   list-style: none;
   margin: 0; padding: 0;
}
#reportnavigation li {
   float: left;
}
#reportnavigation li a {
   display: block;
   background: #004D6F;
   margin-right:6px;
   margin-bottom:6px;
   text-align: center;
   color: #FFF;
   padding: 5px;
}
#reportnavigation li a:hover {
   background: #017db6;
   color: #FFF;
}
</style>

<div style="width: 637px;">
	<ul id="reportnavigation">
		<li><a href="#aesthetics">Aesthetics/Dermatology</a></li>
		<li><a href="#biomaterials">Biomaterials</a></li>
		<li><a href="#biotechnology">Biotechnology/Cell Therapy</a></li>
		<li><a href="#cardiovascular">Cardiovascular</a></li>
		<li><a href="#dental">Dental</a></li>
		<li><a href="#diagnostics">Diagnostics</a></li> 
		<li><a href="#drug delivery">Drug Delivery</a></li>
		<li><a href="#endocrine">Endocrine</a></li>
		<li><a href="#gastroenterology">Gastroenterology</a></li> 
		<li><a href="#gynecology">Gynecology/Womens's Health</a></li>
		<li><a href="#imaging">Imaging</a></li>
		<li><a href="#neurology">Neurology</a></li> 
		<li><a href="#oncology">Oncology</a></li> 
		<li><a href="#ophthalmology">Ophthalmology</a></li>
		<li><a href="#orthopedics">Orthopedics</a></li>
		<li><a href="#pain management">Pain Management</a></li> 
		<li><a href="#patient management">Patient Management/Monitoring</a></li><br/>
		<li><a href="#procedure volumes, disease incidence & prevalence">Procedure&nbsp;Volumes,&nbsp;Disease&nbsp;Incidence&nbsp;&amp;&nbsp;Prevalence</a></li>
		<li><a href="#respiratory">Respiratory</a></li>
		<li><a href="#spine">Spine</a></li> 
		<li><a href="#surgery">Surgery</a></li>
		<li><a href="#urology">Urology</a></li>
		<li><a href="#vascular">Vascular</a></li>
		<li><a href="#wound management">Wound Management</a></li>
	</ul>
	</div>

[Stevie D]

(I'm guessing about the behaviour you're seeing because the attachment isn't approved yet. If possible, it's better to put the image on your own dev website and give us a link to it, that way we don't have to wait for it to be approved)

If you have got   in your text instead of spaces, that's exactly what should happen.   stands for non-breaking space. In other words, it leaves a space between the words but doesn't allow a (line) break there. You should only use it where you need to keep words or numbers together on the same line.

[Paul O'B]

Hi,

Float the anchor and then remove the bottom margin from the anchor and put it on the list istelf because ie7 is snagging on the margin.

#reportnavigation li {
   float: left;
   margin-bottom:6px;
}
#reportnavigation li a {
   float:left;
   background: #004D6F;
   margin-right:6px;
   text-align: center;
   color: #FFF;
   padding: 5px;
    }

That should fix it with any luck

[ripcurlksm]

If you have got   in your text instead of spaces, that's exactly what should happen.   stands for non-breaking space. In other words, it leaves a space between the words but doesn't allow a (line) break there. You should only use it where you need to keep words or numbers together on the same line.

Gotcha, im my testing, I wanted to try and make it all one string of text with the hope it would keep it as one line and move it down to the next line instead of the text getting broken up

Hi,

Float the anchor and then remove the bottom margin from the anchor and put it on the list istelf because ie7 is snagging on the margin.

That should fix it with any luck

In combination with adding   to make the text one long string and your CSS changes, it looks pretty good now in IE6,7,8 and FF. Thank you!