title: IE7 issue with text alignment
body: <p>I have a set of columns on my site. Each item is an <code>&lt;a&gt;</code> within an <code>&lt;li&gt;</code> and a member of an <code>&lt;ul&gt;</code>. The columns are set up so that the top-most <code>&lt;li&gt;</code> has a different class from the lower <code>&lt;li&gt;</code>'s in the same list (<code>&lt;ul&gt;</code>). </p>
  
  <p>In IE7, the top <code>&lt;li&gt;</code> element will not align appropriately with it's lower neighboring <code>&lt;li&gt;</code>'s. </p>
  
  <p>Here is how it should look (Latest version of Google Chrome):</p>
  
  <p><img src="https://i.imgur.com/tdfEaK2.png" alt="I Love Google Chrome"></p>
  
  <p>Here is how it looks in IE7 (looks fine in >=IE8):</p>
  
  <p><img src="https://i.imgur.com/dmhCeZW.png" alt="I Hate IE7"></p>
  
  <p>**Don't mind sizing differences.*</p>
  
  <p>Here is the trimmed HTML for a single column</p>
  
  <pre><code> &lt;div class="map-col" id="map-2"&gt;
      &lt;ul class="site-map"&gt;
        &lt;li&gt;&lt;a class="map-upper"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="map-lower"&gt;Wood Fencing&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="map-lower"&gt;Ornamental Iron&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="map-lower"&gt;Gates and Openers&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="map-lower"&gt;Restoration&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS (I pulled out anything that didn't have to do with positioning --such as font-weight and font-size-- for readability)</p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>As far as it seems to me, IE7 just doesn't like when two separate CSS classes are appended to a single list.</p>