CSS element consuming entire width in IE7

I have an IE7 CSS issue. I have setup a demo in jsfiddle, but basically I have a tabbed menu setup with rounded corners on the tabs (no rounded corners shown in jsfiddle). The rounded corners are floated left and right.

Everything works great in FF and Chrome, but in IE7 the floated elements are causing the tabs to consume the entire width. I have tried numerous things, overflow: hidden, position, display, etc... but I just can开发者_如何学JAVA't work it out!

Any help appreciated.

http://jsfiddle.net/EszSr/1/

I would just set the corner elements to display: absolute; and the containers to position: relative if needed. That should work.

Simple demo on jsFiddle: http://jsfiddle.net/ZSpjk/1/

Something that I'd try (don't have access to IE7 atm.) is, to give the tabs a width (only for IE, e.g. through a conditional comment). It could be a smaller width than you actually need, IE will "widen" it as needed for the content.