Question

I have an input (type='submit') in a div with a fixed width (but not fixed height). In all browsers the text wraps, except for Opera, in which all the text is on a single line, and the overflow is hidden (even setting overflow:visible doesn’t remedy this).

However, I discovered something bizarre, when I attempted to select the contents of the input, it started to marquee scroll! Is this some oddity in Opera? I can’t find it documented anywhere. I can’t replicate this behaviour on any other browser. We do have some jQuery on the site, but no scrolling marquees, and nothing affecting this element. My head is full of WTF at the moment!

HTML:

<li class="last">
  <input id="product-renewal" name="product" type="submit" value="Quite a long bit of text in here"/>
</li>

CSS:

li.last{
  flat:left;
  display: list-item;
  list-style-type:none;
  text-align:left;
}
input{
  border: 0;
  margin: 1px 0;
  padding: 125px 0 10px;
  white-space: normal;
  overflow: visible;
  width:150px;
}

I’ve snipped a bit, but this is everything that should be relevant.

I’ve check with JS turned off: it still does it, so this is definitely some native opera behaviour.

Answer 1

Wow, this is some funky behavior. I mean, I guess it’s cool since it’s showing you the full text on the input button, but it’s pretty quirky. I assume you’re replacing the button with an image and you need it to be that specific size?

This gives me the same behavior in Opera and Chrome. Didn’t test beyond that.

http://jsfiddle.net/nLS9M/2/

<ul>
    <li class="last">
        <button id="product-renewal" name="product" type="submit">Quite a long bit of text in here</button>
    </li>
</ul>

li.last{
  flat:left;
  display: list-item;
  list-style-type:none;
  text-align:left;
}
button{
  border: 0;
  margin: 1px 0;
  padding: 125px 0 10px;
  white-space: normal;
  overflow: visible;
  width:150px;
}