IE8 Min-Width & Absolute Positioning issue

HTML & CSS
1

I have a drop down menu who’s trigger is a user name that can be of variable length. Inside the drop down there are buttons. To make the design look good when a user’s name is really long I made the buttons inside the drop down width: 100%, and for it to look good when a user’s name is very short I set a min-width.

Everything works great in every browser except IE8.

In this jsfiddle I’ve simplified the code and the drop down is always “on”. I’ve also done two versions, one with a long name and one with a short name.

If you view it in IE8 the dropdown shifts over to the side incorrectly when a user’s name is very short. It seems like when you set a min-width on an absolutely positioned element, IE8 doesn’t like it.

Any ideas? Thanks!

2

For those who may wonder in the future, the solution:

Still no idea as to the root cause. Ahh, the mysteries of IE…

3

On second pass - the above solution is not perfect, since in the case of the short name the width of the top level item is fixed and does not shrink to the size of the name. Given that this is a list of menu items it’s not ideal.

If anyone has any thoughts about why min-width wouldn’t play nice in IE8 (but does in IE7) I’d love to hear them!

Thanks.