Internet Explorer Mobile

Oh what a lovely browser </sarcasm>. I admit I do use it for brows­ing the mobile web (i.e. site designed only for mobile browsers), it works well with those sites and I need one keypress less than Opera Mobile when paging through the mobile twit­ter site. How­ever, if required to visit a tra­di­tional web site on my phone, I will use Opera Mobile. IE mobile’s ren­der­ing of tra­di­tional web pages is com­ical enough to almost win me a Web­Jam (and I did not have to dance).

The fun really starts when you try to build a site that works in both tra­di­tional web browsers and mobile browsers. IE mobile applies both screen and hand­held stylesheets. Which can cause chaos. Even know­ing this is not enough, I you try to coun­ter­act the screen stylesheet by remov­ing styles in a hand­held stylesheet, you need to do it properly.

To remove a background-color you can not do it by short­hand with back­ground: none; or even background-color: none; you need to do it with background-color: #fff;

And I strongly recom­mend a white back­ground and dark text for web pages inten­ded for mobile devices, because you never know how some mobile web browsers will render a page and often text will appear on a dif­fer­ent back­ground than you intended.

To remove a background-image, again you can not do it short­hand with back­ground: none; you need to do it with background-image: none

Then there is lists. You have abso­lutely no con­trol of padding-left of list items with IE mobile. There is set default amount of pad­ding, roughly 2em and noth­ing you can do to decrease it, as neg­at­ive mar­gin or text indents do not work in IE mobile.

This entry was posted on Thursday, November 1st, 2007 at 8:34 pm and is filed under css and html, mobile web . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.