<br /> Not Working in Internet Explorer?

My menu displays with breaks in other browsers but not IE. Can anyone inform me why?

Here's the code:

<ul class="vertical">
<li><a href="/soccer-skills" class="active"><span><b>SKILLS</b></span></a></li>
<li><a href="/soccer-shooting"><span>Shooting</span></a></li>
<li><a href="/soccer-dribbling"><span>Dribbling</span></a></li>
<li><a href="/soccer-passing"><span>Passing</span></a></li>
<li><a href="/soccer-shielding"><span>Shielding</span></a></li>
<li><a href="/soccer-heading"><span>Heading</span></a></li>
<li><a href="/soccer-juggling"><span>Juggling</span></a></li>
<li><a href="/soccer-defending"><span>Defending</span></a></li>
<br />
<li><a href="/soccer-basics" class="active"><span><b>BASICS</b></span></a></li>
<li><a href="/soccer-equipment"><span>Equipment</span></a></li>
<li><a href="/soccer-rules"><span>Rules</span></a></li>
<li><a href="/soccer-benefits"><span>Benefits</span</a></li>
<br />
<li><a href="/mental-soccer" class="active"><span><b>MENTAL</b></span></a></li>
<li><a href="/soccer-tryouts"><span>Tryouts</span></a></li>
<li><a href="/soccer-confidence"><span>Confidence</span></a></li>
<li><a href="/soccer-arrogance"><span>Arrogance</span></a></li>
<li><a href="/soccer-teammates"><span>Teammates</span></a></li>
</ul>

 

Which version of IE is this?

Alternatively, you could replace all <br />'s with </ul><ul class="vertical"> so it'd force a line break anyway.

 

I would style the list in CSS and use margins to separate it. I would also remove the span tags and replace the bold tags with strong tags.

 

Its happening because different browser use to have different spacing and margind for <ul>. Its nothing with the <br/>. Rather use this to have consistency -


<ul class="vertical">
<li><a href="/soccer-skills" class="active"><span><b>SKILLS</b></span></a></li>
<li><a href="/soccer-shooting"><span>Shooting</span></a></li>
<li><a href="/soccer-dribbling"><span>Dribbling</span></a></li>
<li><a href="/soccer-passing"><span>Passing</span></a></li>
<li><a href="/soccer-shielding"><span>Shielding</span></a></li>
<li><a href="/soccer-heading"><span>Heading</span></a></li>
<li><a href="/soccer-juggling"><span>Juggling</span></a></li>
<li><a href="/soccer-defending"><span>Defending</span></a></li>
</ul>
<ul class="vertical">
<li><a href="/soccer-basics" class="active"><span><b>BASICS</b></span></a></li>
<li><a href="/soccer-equipment"><span>Equipment</span></a></li>
<li><a href="/soccer-rules"><span>Rules</span></a></li>
<li><a href="/soccer-benefits"><span>Benefits</span</a></li>
</ul>
<ul class="vertical">
<li><a href="/mental-soccer" class="active"><span><b>MENTAL</b></span></a></li>
<li><a href="/soccer-tryouts"><span>Tryouts</span></a></li>
<li><a href="/soccer-confidence"><span>Confidence</span></a></li>
<li><a href="/soccer-arrogance"><span>Arrogance</span></a></li>
<li><a href="/soccer-teammates"><span>Teammates</span></a></li>
</ul>

 

try this:

<ul class="vertical">
<li><a href="/soccer-skills" class="active"><span><b>SKILLS</b></span></a></li>
<li><a href="/soccer-shooting"><span>Shooting</span></a></li>
<li><a href="/soccer-dribbling"><span>Dribbling</span></a></li>
<li><a href="/soccer-passing"><span>Passing</span></a></li>
<li><a href="/soccer-shielding"><span>Shielding</span></a></li>
<li><a href="/soccer-heading"><span>Heading</span></a></li>
<li><a href="/soccer-juggling"><span>Juggling</span></a></li>
<li><a href="/soccer-defending"><span>Defending</span></a><br /></li>

<li><a href="/soccer-basics" class="active"><span><b>BASICS</b></span></a></li>
<li><a href="/soccer-equipment"><span>Equipment</span></a></li>
<li><a href="/soccer-rules"><span>Rules</span></a></li>
<li><a href="/soccer-benefits"><span>Benefits</span</a><br /></li>

<li><a href="/mental-soccer" class="active"><span><b>MENTAL</b></span></a></li>
<li><a href="/soccer-tryouts"><span>Tryouts</span></a></li>
<li><a href="/soccer-confidence"><span>Confidence</span></a></li>
<li><a href="/soccer-arrogance"><span>Arrogance</span></a></li>
<li><a href="/soccer-teammates"><span>Teammates</span></a></li>
</ul>

 

or you can do it like these.<li style="padding-top:10px">Lorem</li>