Web and WebWorks Development

[motecap]

Hi everyone, I'm new here, all of a sudden!

Tonight, I have hit a new roadblock in my quest to bring my web app to the blackberry platform.  I am not having any luck google searching a solution and the  Blackberry browser pdf documentation for that is available is no help (so far as I've looked through the CSS and HTML manuals).

I am trying to implement CSS sprites, and using an image that is larger than the width of the screen on the different blackberry simulators I've been testing on (9530 storm (4.7.0.41),   9000 bold (4.6.0.150), Smarthphone Simulator 2.11.0.38 )  and the image always comes out looking rediculous.

The  browser even resizes an image if it's in an <img src='...' alt='...' /> element.  I'm using PNG files, and the image I need to see at proper scale is over 976x330 pixels.

I have the technique working in another mobile device, but I don't own any blackberry, so I just use the emulator.   Yet, the act of the browser auto-shrinking seems very out-of-the-ordinary.... 

Help!  Thanks in advance.

BTW- this is going into a production environment as soon as this is figured out. 

sample code:

<div style='background-image:url(bigimage.png); width:50px; height:50px;'></div>

I may not have tried every combination of background CSS properties, I cannot remember...  

-Tom 

[toddm]

I'm just guessing here, but try switching from page mode to column mode in the browser and make sure your CSS isn't setting max-width for img's.

[motecap]

Hi ToddM, thanks for the quick reply. Just happened to be on the site checking for a response and yours appeared. 

The setting for column mode actually makes the box with given width and height stretch across the screen 100%, and be 0 pixels high (because there is no actual content within).

The <img> tag does not have any max width styling, it's just a straight image.

 I know the Storm emulator has a screen width of  345 px between left and right within the vertical scroll bar (according to the emulator), and I have a positioned <div> tag set at that width to see if I'm at the default zoom or not, and just seeing that at proper full width, the images still shrink.  

This is frustrating! 

[skote]

I have a blog post that details what is going on here.

http://www.onehat.com/blog/2009/06/blackberry-browser-bug-with-background-images/

The bottom line is that you need to assemble your sprites in a tall, narrow fashion instead of horizontal because any time your complete sprite image is wider than the screensize, the Blackberry is going to shrink it.