title: Set a fixed width to each LI element
body: <p>I have a navigation bar that I want to get the width of each <code>&lt;li&gt;</code> element, then place a fixed width to it.</p>
  
  <p>Reason: IE 7 needs the parent (in this case the <code>&lt;li&gt;</code> element) to be fixed width for the child <code>&lt;div&gt;</code> element to use <code>margin: 0 auto</code> to center itself. Since its not fixed width, the <code>auto</code> is pushing the <code>&lt;li&gt;</code> tag to 100% width;</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="subnav"&gt;
  &lt;ul&gt;
  
  &lt;li class="apparel"&gt;
  &lt;a href="apparel.html"&gt;
  &lt;div class="image"&gt;&lt;/div&gt;
  &lt;div class="title"&gt;APPAREL&lt;/div&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="pads"&gt;
  &lt;a href="pads-girdles.html"&gt;
  &lt;div class="image"&gt;&lt;/div&gt;
  &lt;div class="title"&gt;PADS/GIRDLES&lt;/div&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.subnav { margin:20px auto; }
  .subnav ul { float:left; }
  .subnav li { display: block; 
             cursor:pointer; 
             position:relative; 
             float:left; 
             padding:5px 8px 0;    
             border-top:1px solid #FFF; 
             border-left:1px solid #FFF; 
             border-right:1px solid #FFF; }
  .subnav li.last-link { margin-right:0; }
  .subnav li div.title { font-family: 'Cuprum', sans-serif; 
   font-size:15px; font-weight:500; text-align:center; margin-top:5px; color:#214592; }
  .subnav li div.image { background-repeat:no-repeat; overflow:hidden; margin:0 auto; background-position:center center; height:60px;  }
  .subnav li.apparel div.image { background-image:url(../images/football_apparel_icon.jpg); width:58px; }
  .subnav li.pads div.image { background-image:url(../images/football_pads_icon.jpg); width:50px; }
  .subnav li.gloves div.image { background-image:url(../images/football_gloves_icon.jpg); width:33px; }
  .subnav li.accessories div.image { background-image:url(../images/football_pads_icon.jpg); width:50px; }
  .subnav li.protective div.image { background-image:url(../images/football_protective_icon.jpg); width:64px; }
  .subnav li.cleats div.image { background-image:url(../images/football_cleats_icon.jpg); width:64px;  }
  .subnav li.accessories div.image { background-image:url(../images/football_accessories_icon.jpg); width:47px; }
  .subnav li.footballs div.image { background-image:url(../images/football_football_icon.jpg); width:55px; }
  .subnav li.sport div.image { background-image:url(../images/football_sport-bag_icon.jpg); width:58px; }
  .subnav li.hydration div.image { background-image:url(../images/football_hydration_icon.jpg); width:22px; }
  .subnav li.performance div.image { background-image:url(../images/football_performance_icon.jpg); width:88px; }
  </code></pre>