Extra whitespace around images on Nokia 6230 in XHTML page

[vierkant]

I have a really annoying problem with the new Nokia 6230 handset. It looks like this handset automatically adds 2 pixels of whitespace around each image when this image is being displayed in a XHTML page. If you put text directly below the image it is very obvious that the image is positioned two images more to the right. Looks ugly.

Why is this a problem? All other Nokia handsets alike (6220, 3100, 3200, 7250i, 6610i, etc) don't have this problem. A header/banner image which fits perfectly on one of these handsets, will create a horizontal scrollbar on the 6230. Just because the image is positioned two pixels more to the right.

Two questions;
- Is my assumption right? Anybody else seen this as well?
- How do I prevent this from happening. I tried defining left- and topmargin to 0 pixels, which helps on the 3650/6600/etc with this same problem, but on the 6230 I see no difference.

Please let me know as right now it looks I have to make new header/banner images which fit on the 6230.

Regards,
Ivo

[vmlf]

Hello.

We are having this problem with all Series 40 simulators and telephones we have tried.

I know that, for example, the Vodafone Live! portal on a Nokia 6101 has images without the whitespace around them, but our site renders with spaces.

Has anyone come up with a solution to this problem?

[SimonThomas]

We've seen this on some phones and seems to be caused when an image is within a table data <td> tag.

Adding this css style fixed it for us:-
td img {vertical-align: bottom; padding:0px;}

Hope that helps
Regards
simon AT wapple DOT net

[vmlf]

Thank you for your reply, we gave it a try and it didn't work for us.

The spacing exists all around the image and not only below it.
We have tried every kind of CSS styling we could think of and nothing seems to work.
On other phone models, like Series 60 devices, everything works as expected.
Our code resembles something like this:


<div class="xhtml_width">
<img src="img/img208px/banner_home.gif" class="header_img" alt="" />
<div class="header_text">
Introduza a sua identificação e palavra chave.
</div>
</div>


The "header_text" div has a background color which was supposed to join with the image, but instead we are getting a white spacing on all sides of the image and also because of this, the image is positioned a bit to the left of the rest of the page, causing horizontal scrolling in some cases.

Anyone else with this kind of behaviour or knows the solution? Anyone from Nokia cares to comment on this behaviour?

[SimonThomas]

Thank you for your reply, we gave it a try and it didn't work for us.

Hi,
the css style 'td img{}' wouldn't work in your case as your encapsulating in <div> tags.

the 'td img{}' css style affects only images within <td> tags.

You could try just ' img{vertical-align: bottom; padding:0px;} '
But this would be applied to all images in the document.

If this is not what you want, try ' div img{} ' or assign a class to the img, or assign the css inline using the style="" attribute.

Also have you tried giving height and width attributes to the image tag??

Do you have a url to the page? or the complete source code for the page? it would be easier to see whats going on then.