I'm facing an issue with the alignment of columns on my website. Each item is represented by an <a> tag within an <li> element, which is part of a larger <ul>. The topmost <li> in each list has a unique class compared to the lower <li>s.
In Internet Explorer 7, there's a problem with how the top <li> aligns with its lower siblings.
This is how it should appear (on the latest version of Google Chrome):
However, this is how it looks in IE7 (looks fine in versions >=IE8):
**Please ignore any differences in sizing.*
Here's a simplified HTML structure for a single column:
<div class="map-col" id="map-2">
<ul class="site-map">
<li><a class="map-upper">Services</a></li>
<li><a href="#" class="map-lower">Wood Fencing</a></li>
<li><a href="#" class="map-lower">Ornamental Iron</a></li>
<li><a href="#" class="map-lower">Gates and Openers</a></li>
<li><a href="#" class="map-lower">Restoration</a></li>
</ul>
</div>
Below is the CSS code related to positioning (extraneous styles removed for clarity)
.site-map{display:inline;}
.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}
#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}
It appears that IE7 struggles when applying multiple CSS classes to a single list.