Question

A fully working example is availiable here on jsFiddle. I strongly encourage you to look here as the CSS is kind of large, and I didn’t want to paste it here (making my question hard to read).

I have a horizontally centered tabstrip on my site, the idea is the UL/LI items are centered on the page and I have a solution that up until very recently (looked) like it worked on all browser configurations.

The html for this is actually quite simple:

<div id="tabContainer">
    <ul>
        <li style="width: 190px;"><span><a href="#">Tab One with more text</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Two</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Three is wide</a></span></li>
    </ul>
</div>

• Each <li> is a tab, it’s got left padding for the left rounded tab stuff.
• Each <span> has right padding for the right rounded tab stuff.
• Finally the <a> generally fills up the remainder making for a large click target.
• Each Item is manually styled with a width: 190px which keeps thier widths uniform (for a nice visual look, this is customized by the site code so it’s in a style vs a class.

The CSS:

• The CSS works off a simple concept, the <ul> is shifted 50% right, and the <li> is shifted 50% left (left: -50%;) to put them always in the center of the master container.
• The tabs overlap a bit using negative margin & z-index so the corner pieces criss-cross (done in the background image which isn’t important here)

The Problem

IE7 decides that it’s not going to listen to the explicit style="width: 190px", even if !important is added to it. However, this only seems to happen when left: -50% is present on the <li> item. If that style is removed the tabs shift to the right (wrong location, but correct fixed width).

To me, this seems like it’s unrelated as there’s nothing the left: -50% would cause the items to collide with forcing them to go to thier minimum width.

This setup works correctly and is tested in:

• IE8
• IE9
• FF3.6
• FF5
• Chrome Stable (v13)*
• Chrome Beta (v14)*
• Safari 3

*As of July 18th, 2011

---

So, what could be causing this? Why is it happening? How can I fix it? I’ve tried all sorts of tweaks, and cannot get it to obey the width…

---

Image so you can SEE the problem side-by-side:

Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png

Answer 1

I suggest putting style="min-width:190px; max-width:190px;" instead of style="width:190px;". It works fine for me in IE7 document/browser mode.