Question

I’m making a “sort elements” web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I’m having problem with IE7 wrapping words inside block elements.

Here’s how it looks in IE7 (wrong):
Link (cannot post images as a new user)

In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can’t give another link as a new user

Don’t mind the element order as it’s random. Elements are dynamically generated by jQuery.

HTML code:

<div class="ui-sortable" id="area">
  <span class="object">: </span>
  <span class="object">1998- </span>
  <span class="object">ISSN 1392-4087</span>
  <span class="object">, </span>
  <span class="object">. </span>
  <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">Vilnius</span>
  <span class="object">1998- </span>
  <span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>

CSS code (irrelevant info like fonts & colors removed):

#area {
  min-height: 160px;
  width: 760px;
}
.object {
  display: block;
  float: left;
  text-align: center;
  width: auto;
}

Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?

Answer 1

I tried it out myself in IE7, and when you just add ‘white-space: nowrap’ to the span.object, it should solve the problem. Floating the block elements works just fine, so don’t change that.

See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg