Geek Answers Handbook

CSS left: -50%, causing IE7 to ignore the width

A complete working example is available here on jsFiddle . I highly recommend you look at how CSS is very large, and I did not want to embed it here (which makes it difficult to read my question).

I have a horizontal centered strip on your site, the idea is that the UL / LI elements are centered on the page, and I have a solution that until recently looked like it worked in all browser configurations.

The html for this is actually pretty 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 has a left pad for the left rounded tab.
  • Each <span> has the right fill for the desired material with rounded tabs.
  • Finally, <a> usually fills the remainder, creating a large click target.
  • Each element is handmade in style with width: 190px , which preserves the uniformity of width (for a pleasant visual viewing, this is configured by the site code, so it is in style vs a class .

CSS:

  • CSS works with a simple concept, <ul> moves 50% to the right, and <li> moves 50% to the left ( left: -50%; ) to always put them in the center of the main container.
  • The tabs overlap slightly using the negative field and z-index, so the corner fragments intersect (done in the background image, which is not important here).

Problem

IE7 decides that it will not listen to explicit style="width: 190px" , even if !important added to it. However, this only happens when left: -50% present in the <li> element. If this style is removed, the tabs are shifted to the right (incorrect location, but the correct fixed width).

For me, this seems unrelated, since nothing left: -50% will not cause the elements to collide in order to force them to go to the minimum width.

This setting works correctly and tested in:

  • IE8
  • IE9
  • Ff3.6
  • Ff5
  • Chrome Stable (v13) *
  • Chrome Beta (v14) *
  • Safari 3

* As of July 18, 2011

So what could be causing this? Why is this happening? How can i fix this? I tried all sorts of tricks and can not make it obey the width ...

Image so you can VISIT the problem side by side:

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

+7
source share
2 answers

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

+2
source

IE 7, which uses it anyway?!?

You are trying to use em instead of pixels, there is a good em converter here: http://pxtoem.com/

-2
source

More articles:


All Articles