SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6+IE7 wrapping problem

    At work we're using jNice to make our buttons look a bit nicer. Unfortunately the library itself has some IE6+IE7 bugs. One of these bugs affects the styling of <button>'s. I have spent a couple of hours this morning investigating this bug and trying misc. classic IE fixes to no avail.

    Steps to replicate in IE8 (using compatability mode to simulate IE7):

    1. Go to http://www.whitespace-creative.com/jquery/jNice/
    2. Load up the IE Developer toolbar after going into IE7 compatability mode
    3. Edit the HTML so that the submit button says "submit long long long long" or any other long string to see the wrapping of the text


    See the attached screenshot illustrating the problem. (For now here is a link to imageshack with the image as the attachment is pending approval: http://img90.imageshack.us/img90/1978/jnicebug.gif)

    Notes:

    From my investigation it seems to be to do with floats and display: block on the inner floats that causes the wrap. Obviously the easy fix is to set an explicit width for the inner span's but we use jNice across the whole site for all kinds of these buttons which have different amounts of text inside of them, so explicitly setting widths isn't an option. The buttons need to dynamically expand.

    Any input would be greatly appreciated.

    Thanks,
    Dean
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi Dean,

    Assuming that you don't have any buttons that you want to wrap then a quick fix would be this.

    Code:
    button span span{white-space:nowrap;}

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It seems to have something to do with the Javascript-if I remove the scripts then it doesn't wrap.

    Pauls code is a quick fix though I'd be inclined to find a new script

    You can tell it's not to do with the float/display of the spans because even if we do this
    Code:
    button, button *{float:none!important;display:inline!important;}
    It doesn't work .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi Ryan,

    Actually it is just the fact that the span is floated without a width inside the button and causes IE to "shrink to fit" because the parent (the button element) is also shrink to fit. It's just buggy behaviour again.


    e.g. This code shows it in action.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    button span {float:left}
    </style>
    </head>
    <body>
    <button><span><span>button with longer text</span></span></button>
    </body>
    </html>

  5. #5
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did suspect this was the case, although I wouldn't have guessed the fix I'll do some testing tomorrow using your fix Paul. Thanks as always and hope all is well!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah yes of course, IE just confused me since the removal of hte JS caused no wrapping (and no styling).

    Oh well, guess I need more sleep .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •