<li> elements have some mysterious left padding added on iphone over 3G but not over wifi

Question

I'm having some strange issues on <li> elements when viewing my webpage on an iphone.

There appears to be a mysterious padding added to the left of ALL <li> elements on the page (almost like a padding-left:30px) when viewing the webpage over 3G/Edge/GPRS. However, when viewing the page over wifi, the padding disappears, and the page renders as expected.

I use Eric Meyers reset.css stylesheet to reset my styles. This issue has happened to me on previous sites I've built so I know it's not localised just to this particular site. Perhaps O2 (my network provider) are modifying the css before sending it over to my iphone?

If you want to try and replicate this for yourself, my site is at http://www.pyre7.com

Any insight would be appreciated.

Answer 1

It could have something to do with slow speed of 3G and how you render CSS

Answer 2

I've just found this article. It appears o2's proxy cache is in fact modifying content.

http://startupcafe.co.uk/2010/07/23/o2-compression-on-mobile-devices/