Set a fixed width to each LI element

I have a navigation bar that I want to get the width of each <li> element, then place a fixed width to it.

Reason: IE 7 needs the parent (in this case the <li> element) to be fixed width for the child <div> element to use margin: 0 auto to center itself. Since its not fixed width, the auto is pushing the <li> tag to 100% width;

HTML

<div class="subnav">
<ul>

<li class="apparel">
<a href="apparel.html">
<div class="image"></div>
<div class="title">APPAREL</div>
</a>
</li>
<li class="pads">
<a href="pads-girdles.html">
<div class="image"></div>
<div class="title">PADS/GIRDLES</div>
</a>
</li>

</ul> 
</div>

CSS

.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-im开发者_运维技巧age: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; }

---

95% of the time, text-align:center is all you need to center something. Try this demo in IE6 or IE7:

http://jsfiddle.net/6M8Ew/

The only relevant thing* I've done is this:

ul li {
    display:block;
    text-align:center;   
    float:left;
}

_{* Keep in mind that jsfiddle's default reset stylesheet is enabled in the demo.}

The contents of the <li>s are centered in IE6 and IE7.

Feel free to share your CSS and expected output if you can't fine-tune it using this technique - I can pretty much guarantee that's there's a pure CSS solution for whatever you want to do, and you don't need javascript.

Side note: <div> (block level element) is illegal within <a> (inline). To conform to standards, use an inline tag like <span>.

---

EDIT: Check this updated demo in IE6 and 7, it looks just like it does in Firefox and Chrome: http://jsfiddle.net/zFLK7/3/

Here's what I changed to your code (see very bottom in demo, I only added code and didn't modify your existing CSS):

.subnav ul li {
    text-align:center;
}
.image {
    margin:0 auto; /* this was already there, needed for modern browsers */
    *margin:0 !important; /* IE6 and 7 needed this */
}

Note: You don't actually need !important, just remove margin:0 auto; from the first, more specific declaration, I just didn't want to modify your code, and wanted to show how easy it was.

I used the "star hack" to add a special rule for IE7 and below: http://en.wikipedia.org/wiki/CSS_filter#Star_hack

Feel free to use conditional stylesheets or other methods (recommended) instead of IE hacks, but that was all it took to fix your layout, no javascript was necessary. Always look to the CSS solutions first before making assumptions that you need javascript.