SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 Min-Width & Absolute Positioning issue

    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.

    http://jsfiddle.net/ntS3t/

    Any ideas? Thanks!

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For those who may wonder in the future, the solution:

    http://jsfiddle.net/WrXas/2/

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

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •