2

I have got rollover images setup on a site i'm building using css background images like so:

.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}

.rollover a:hover {
background-position: -400px 0;
}

This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.

Thanks very much as ever everyone!

Dave

deshg
  • 1,233
  • 4
  • 27
  • 45
  • are you doing a css reset on any elements already? such as `*{margin:0;padding:0;}` – Tim Joyce May 11 '11 at 20:11
  • Sounds like a rounding issue with the, stupidly named, ["retina display"](http://en.wikipedia.org/wiki/Retina_display#Display). If your site does not tell the iphone not to zoom or you do not have a style for the doubly dense pixel ratio on the iphone 4, you will likely have this issue. – Kevin Peno May 11 '11 at 21:05
  • @TimJoyce - Yes i hae already reset all elements using *{marign:0;padding:0;} – deshg May 11 '11 at 21:11
  • @KevinPeno - I am actually testing this on an iphone 3 rather than an iphone4 so i don't think it's the retina display issue unfortunately. Are there any other display issues that might be causing this that relate to the iphone 3 that you know of? Thanks so much for your help – deshg May 11 '11 at 21:18
  • @deshg, because mobile phones perform zooming on pages (usually shrinking them) rounding issues are bound to happen. Since iPhone3 had a pixel width of 320px, and you are working with 400px, you may be experiencing this problem. I'd suggest that you rethink your styles. – Kevin Peno May 11 '11 at 21:30
  • @KevinPeno - Thanks for your speedy reply! The code above (with the 400px) was just an example, i have a number of background images of varying sizes which i'm experiencing this issue with. I'm slightly confused how to rectify the rounding issues, as iphone 3's have a width of 320px in portrait does that mean that your page width has to be exactly divisible by 320 (eg 960) and all images within have to be scalable by the ratio (eg if you have a 960 wide site, which is 3 x 320, then your image widths must be divisible by 3 in order to ensure they are an exact pixel width after scaling)? – deshg May 12 '11 at 09:43
  • @KevinPeno - Sorry i didn't have enough space in the last comment! Additionally the width in landscape of the iphone 3 is 480px (i think!) so presumably the same calculations would have to work with this width too? Do you know of anywhere I can read up on how to rectify this as all the descriptions I can find don't actually give any direction on this particularly, it just explains iphone scaling which doesn't really explain how to rectify this. Thanks SO much for your help! – deshg May 12 '11 at 09:55

1 Answers1

0

Try adding this .rollover a {overflow:hidden}

breezy
  • 1,910
  • 1
  • 18
  • 35
  • I like your style, that sounds like the sort of thing that would work, but unfortunately i'm having exactly the same problem even after adding the overflow hidden so it doesn't seem to fix it sadly :( I think it must be something like this that is required as i have just got an IPAD 2 and i have exactly the same problem on this but not on any other browser/device (it even displays correctly on my old blackberry!). Thanks so much for your help and any other ideas you may have! Dave – deshg May 17 '11 at 10:43
  • @deshg I have the same problem when dealing iPads' maybe someone in the community has another possible solution. – breezy May 17 '11 at 11:27