Menu
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>
<li> is a tab, it's got left padding for the left rounded tab stuff. <span> has right padding for the right rounded tab stuff. <a> generally fills up the remainder making for a large click target.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:
<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 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:
*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
416
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following. This tells the browser to account for any border and padding in the values you specify for an element's width and height.
Padding and Element Width The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
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.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
