IE6+IE7 wrapping problem

HTML & CSS
1

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

2

Hi Dean,

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


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

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 :slight_smile:

You can tell it’s not to do with the float/display of the spans because even if we do this


button, button *{float:none!important;display:inline!important;}

It doesn’t work ;).

4

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. :slight_smile:

e.g. This code shows it in action.


<!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

I did suspect this was the case, although I wouldn’t have guessed the fix :slight_smile: I’ll do some testing tomorrow using your fix Paul. Thanks as always and hope all is well!

6

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 :p.