10

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 &nbsp; 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 :)

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Chris Marasti-Georg
  • 34,091
  • 15
  • 92
  • 137

18 Answers18

25

You could try the css "nowrap" option in the containing div.

{white-space: nowrap;}

Not sure how widely that is supported.

thanksd
  • 54,176
  • 22
  • 157
  • 150
Ken Ray
  • 2,500
  • 3
  • 21
  • 28
3

Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image

Generate them on the fly caching the created images for reuse.

Paul Whelan
  • 16,574
  • 12
  • 50
  • 83
3

I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).

Tim Cochran
  • 1,834
  • 2
  • 15
  • 13
  • This is built using GAE, and I am concerned about CPU quota usage... I suppose I could cache each image after generation... Something to think about – Chris Marasti-Georg Sep 18 '08 at 14:57
3

What would make the most sense is changing out which image is displayed on the fly:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>
Jason Plank
  • 2,336
  • 5
  • 31
  • 40
racurry
  • 384
  • 1
  • 2
  • 9
2

Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.

Ferruccio
  • 98,941
  • 38
  • 226
  • 299
2

Add a "nowrap" in your td tag...

1

I figured out that there is a setting on the client where they can select the view as 1) Single Column, 2) Desktop View, and 3) Fit Window.

According to MSDN, the default is supposed to be to Fit Window. But my wife's IE Mobile phone was defaulting to a Single Column. So no matter what, it would wrap everything into a single column. If I switched to any of the other two options it looked fine.

Well, you can set this with a meta tag:

<meta name="MobileOptimized" content="320">

will set the page width to 320 pixels. But I don't know how to make it go to auto.

This does not work on BlackBerry's prior to v4.6 - you're stuck with single column unless the user manually changes to desktop view. With 4.6 or later, the following is supposed to work, but I haven't tested it:

<meta name="viewport" content="width=320">
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
  • Awesome, thank you very much. For iPhone/iPod touch support, I am currently using this setting: . Do you know if there is another way that I can tell the blackberries to act correctly? If not, I can leave my current solution, which should be ok. – Chris Marasti-Georg Jan 02 '09 at 01:27
1

Since you're going for maximum compatibility, consider generating a single image representing the frame.

If you're using PHP, you can use GD to dynamically create images representing the frames based on the same input that you would use to create the HTML in your question. The biggest advantage to doing this is that any browser which could display a PNG or GIF would be able to display your frame.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
0

Have separate images for every possible arrangement of each row.

That would only require 30 images (16+8+4+2)

Sam Hasler
  • 12,344
  • 10
  • 72
  • 106
  • There are actually 3 states possible for each pin - knocked down on the first ball, knocked down on the second ball, and not knocked down. That raises the number of images to be pre-calculated by a good bit. – Chris Marasti-Georg Sep 19 '08 at 16:23
0

You might need an actual space immediately following the semi-colon in  

Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
0

Try it with the <div> tag on the same line as <td>...</td>

Chris Serra
  • 13,226
  • 3
  • 25
  • 25
0

I may have misunderstood what you are after but I think that you can do what I've done for logos on a map.

The map background tile is drawn then each image is told to float left and given some interesting margins so that they are positioned as I want them to be (view source to see how it's done).

Teifion
  • 108,121
  • 75
  • 161
  • 195
0

Use the word joiner character, U+2060 (i.e. &#x2060;)

Mike Dimmick
  • 9,662
  • 2
  • 23
  • 48
0

Maybe this is just one case where you could use tables to enforce layout. It's not optimal, and I know you aren't supposed to use tables for things that aren't tabular, but you could do something like this. 

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Kibbee
  • 65,369
  • 27
  • 142
  • 182
  • Use a table - then you have two problems :-) This approach forces the space between images to be as wide as the images themselves, which is propably not what he wants. – JacquesB Sep 18 '08 at 15:44
0

Do you have tried to define a width for the column? Like <td width="123px"> or <td style="width:123px">. And maybe also for the div ?

Michel
  • 706
  • 3
  • 6
0

You can replace img with span and use a background image with each span, depending on a CSS class:

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

(Personally I think it's better to have four lines with a p tag instead of a single div with br.)

Then in CSS you can have something like this:

p.smallpins {
    margin: 0;
    padding: 0;
    height: 11px;
    font-size: 1px;
}
p.smallpins span {
    width: 11px;
    background-image: url(nopinsmall.gif);
    background-repeat: ...
    background-position: ...
}
p.smallpins span.pin {
    background-image: url(pinsmall.gif);
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Michel
  • 706
  • 3
  • 6
0
  • There isn't any nobr HTML tag; I am not sure how well-supported this is, though.
  • You could use CSS overflow:visible and non-breaking spaces between your elements (images), but no other white space in the HTML content for those lines.
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Tyler
  • 28,498
  • 11
  • 90
  • 106
-1

Would it not be easier if you do it like this?

<div id="container">
  <div id="row1">
    <img/><img/><img/><img/>
  </div>
  <div id="row2">
    <img/><img/><img/>
  </div>
  <div id="row3">
    <img/><img/>
  </div>
  <div id="row4">
    <img/>
  </div>
</div>

Whereby your CSS would handle the alignment?

.container div{
  text-align:center;
}
scunliffe
  • 62,582
  • 25
  • 126
  • 161