Question

I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:

o o o o  o o o   o o    o

Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great… mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:

o o o   o o o o  o o   o

or

o o o o o o  o o o  o

The structure is:

<tr>     <td>         <!-- some whitespace -->         <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>         <!-- some whitespace -->     </td> </tr> 

There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.

Any hints or suggestions? Maybe some sort of   that doesn’t actually add a space?

---

Follow-up/Summary

I have received and tried several good suggestions, including:

• Dynamically generate the whole image on the server. It is a good solution, but doesn’t really fit my need (hosted on GAE), and a bit more code than I’d like to write. These images could also be cached after the first generation.
• Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.

What I ended up doing

*hangs head and mumbles something*

Yes, that’s right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:

<table class="game">     <tr class="analysis leave">         <!-- ... -->         <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>         <!-- ... -->     </tr> </table> 

And CSS:

div.smallpins {     background: url(/img/lane.gif) repeat;     text-align: center;     padding: 0;     white-space: nowrap; } div.smallpins img {     width: 1em;     height: 1em; } div.smallpins img.spacer {     width: 4.5em;     height: 0px; } table.game tr.leave td{     padding: 0;     margin: 0; } table.game tr.leave .smallpins {     min-width: 4em;     white-space: nowrap;     background: none; } 

P.S.: No, I will not be hotlinking someone else’s clear dot in my final solution 🙂

Answer 1

You could try the css ‘nowrap’ option in the containing div.

{white-space: nowrap;} 

Not sure how widely that is supported.