Did You Know Pocket IE on Windows Mobile 2003 Supports CSS?


Not many people know this, due to the complete lack of information in the Windows Mobile 2003 SDK, but Pocket IE on Windows Mobile 2003 devices DOES support CSS!

Pocket IE on Windows Mobile 2003 supports CSS Mobile Profile plus a few additional CSS1 and CSS2 attributes to make your mobile web authoring easier than ever before.

In addition, it also supports methods to select CSS stylesheets for mobile devices (i.e. @import, @media, <LINK MEDIA> and <?xml-stylesheet media>) -- more on this later.

Here is some information on the CSS syntax and attributes supported by Pocket IE on Windows Mobile 2003 devices:

Syntax    
  !important  
  integer and real numbers  
  lengths  
    px
    em
    ex
    in
    cm
    mm
    pt
    pc
  percentage values  
  URI values  
  color values  
    #rrggbb
    rgb(r, g, b)
    also over 100 named color values (i.e. red, green, etc.)
Rules    
  @import  
    <uri>
    url(uri)
  media types  
    all
    handheld
    screen
  @media  
    all
    handheld
    screen
Selectors    
  *  
  E  
  E F  
  E:active  
  E:focus  
  E:link  
  E:visited  
  E[foo]  
  E[foo="warning"]  
  E[foo~="warning"]  
  E[lang|="en"]  
  div.warning  
  E#myid  
Properties  
  background  
    [ 'background-color' ||
  'background-image' ||
  'background-repeat' ||
  'background-attachment' ||
  'background-position' ]
    inherit
  background-attachment  
    scroll
    fixed
    inherit
  background-color  
    <color>
    transparent
    inherit
  background-image  
    <uri>
    none
    inherit
  background-position  
    <percentage>
    <length>
    top
    center
    bottom
    left
    center
    right
    inherit
  background-repeat  
    repeat
    repeat-x
    repeat-y
    no-repeat
    inherit
  border  
    [ 'border-width' ||
  'border-style' ||
  color ]
    inherit
  border-color  
    <color>{1,4}
    transparent
    inherit
  border-style  
    <border-style>{1,4}
    inherit
  border-top
border-right
border-bottom
border-left
 
    [ 'border-top-width' ||
  'border-style' ||
  <color> ]
    inherit
  border-top-color
border-right-color
border-bottom-color
border-left-color
 
    <color>
    inherit
  border-top-style
border-right-style
border-bottom-style
border-left-style
 
    <border-style>
    inherit
  border-top-width
border-right-width
border-bottom-width
border-left-width
 
    <border-width>
    inherit
  border-width  
    <border-width>{1,4}
    inherit
  clear  
    none
    left
    right
    both
    inherit
  color  
    <color>
    inherit
  display  
    inline
    block
    list-item
    run-in
    compact
    marker
    table
    inline-table
    table-row-group
    table-header-group
    table-footer-group
    table-row
    table-column-group
    table-column
    table-cell
    table-caption
    none
    inherit
  float  
    left
    right
    none
    inherit
  font  
    [ 'font-style' ||
  'font-variant' ||
  'font-weight' ]?
'font-size'
[ / 'line-height' ]
'font-family'
    caption
    icon
    menu
    message-box
    small-caption
    status-bar
    inherit
  font-family  
    [ <family-name> |
  <generic-family> ], *
[ < family-name> |
  <generic-family> ]
    inherit
  font-size  
    <absolute-size>
    <relative-size>
    <length>
    <percentage>
    inherit
  font-style  
    normal
    italic
    oblique
    inherit
  font-weight  
    normal
    bold
    bolder
    lighter
    100
    200
    300
    400
    500
    600
    700
    800
    900
    inherit
  height  
    <length>
    <percentage>
    auto
    inherit
  list-style  
    [ 'list-style-type' ||
  'list-style-position' ||
  'list-style-image' ]
    inherit
  list-style-position  
    inside
    outside
    inherit
  list-style-type  
    disc
    circle
    square
    decimal
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    none
    inherit
  margin  
    <margin-width>
    inherit
  margin-top
margin-right
margin-bottom
margin-left
 
    <margin-width>
    inherit
  padding  
    <padding-width>{1, 4}
    inherit
  padding-top
padding-right
padding-bottom
padding-left
 
    <padding-width>
    inherit
  text-align  
    left
    right
    center
    inherit
  text-decoration  
    none
    underline
    line-through
    inherit
  text-indent  
    <length>
    <percentage>
    inherit
  vertical-align  
    baseline
    sub
    super
    top
    text-top
    middle
    bottom
    text-bottom
    <percentage>
    <length>
    inherit
  visibility  
    visible
    hidden
    collapse
    inherit
  white-space  
    normal
    pre
    nowrap
    inherit
  width  
    <length>
    <percentage>
    auto
    inherit

[Author: Jay McLain]

Comments (32)
  1. jwb says:

    I haven’t been able to use css to style how widgets (such as form buttons or input boxes) appear. I don’t know for sure if its supported or not, but at this point I would say no. Can someone verify or refute this?

  2. Jay McLain says:

    Yes. Confirmed.

    Sorry, I meant to include that information above, but I removed it before posting.

    The following CSS properties are not supported on intrinsic control elements: background-color, all border properties (i.e border-color, border-style, border-width, etc), color, height, width.

  3. Pony99CA says:

    Good list of attributes, but I didn’t realize people had to dig into an SDK to find out Pocket IE in WM 2003 supported CSS. I knew it would support it before it was released thanks to news at the Pocket PC sites.

    My site has taken advantage of CSS for a while, and you can see that on your Pocket PC. For example, visit my Preferences page <http://prefs.svpocketpc.com&gt; on a WM 2003 device and change the theme and font size. It works!

    Steve

    Silicon Valley Pocket PC

  4. Peter says:

    Hi, you just copied the list from the W3C pages. Most of them are not supported by PIE.

  5. castanza says:

    Well I’m finding that very crucial ability to use absolute positioning doesn’t work on PIE. Arg! That means TABLES.

  6. Paco says:

    We are developing a website with two diferent CSS styles. One for screen and the other for IE windows mobile:

    <link rel="stylesheet" type="text/css" href="estilosnuevo.css" media="screen" title="default" />

    <link rel="stylesheet" type="text/css" href="pda.css" media="handheld" title="default" />

    The problem we have is that IE for Windows mobile uses both of them at the same time.

    We want IE for windows mobile to read just the CSS designed for it.

    How can we do that?

    Thank you very much (sorry for my english!)

  7. Ed Sharrer says:

    Absolutely terrible decision for a mobile device to support the "screen" media type. That’s what the "handheld" media type is for!!

    Now my XHTML/CSS pages look like junk in PIE because it unwisely attempts to apply a "screen" stylesheet designed for an 800 x 600 minimum display on a 220px screen.

    I would be more than happy to develop a handheld stylesheet to take advantage of PIE’s CSS support, but what good would that do? PIE will just try to apply the ‘screen’ stylesheet anyway. Insane.

    The promise of coding a page once and serving it up to multiple devices with their own appropriate stylesheets (without resorting to sniffing the client) just got FURTHER away.

    Again, why would you do that?!?

  8. Dennis Pedersen says:

    I did a little quick testing, and it seems that at least *some* browsers understand the screen vs. handheld tag. Wouldn’t it be possible to just have those that read both stylesheets leverage the usual inheritance rules of CSS?

    So, if Windows Mobile reads both of your stylesheets, make the one that loads second be the handheld version, and simply reset those class attributes you don’t want (e.g., float:right;) back to default (float:none;).

  9. Emil says:

    as for windows mobile 2005, it supports the inheritance rules; but it definitly reads the screen style sheet as well; thus your approach, Dennis, is working.

    I encounter another problem, which I don’t find anywhere documented:

    using relative font sizes (%) makes fonts really tiny small on the pocket IE; viewed with opera mobile for instance shows them nicely. The fonts’ sizes in pocketIE show much more sensible when using fixed sizes! where we not really want to fall back to …

  10. Marcos says:

    Great, I am trying to develop a site for Desktop and Pocket. In Opera and Minimo works good but when PIE loads the css files it just get freezed. I found that the "Width" style on my css are the responsables of it.

    Has anyone had a problem like this before.

    Tha

     

  11. Use media="Screen", not media="screen" for your screen stylesheets, and pocket IE will ignore them.

    I agree, absolutely awful decision to support media="screen" on a handheld! But this workaround appears to work.

  12. It looks like text-align:right does not work on <input type="text">. Here’s a test case:

    <html>

     <head>

       <style>

    .a1 { text-align:right }

       </style>

     </head>

     <body>

       <form name="f" method="post">

         <input type="text" name="T1" class="a1" value="66">

         <input type="text" name="T2" style="text-align:right" value="66">

       </form>

     </body>

    </html>

    I tried this using the Pocket PC 2003 emulator and the text was always left-aligned. Is there some workaround for this?

  13. Max Cheban says:

    How can I provide background image for <input type="button">?

    I tried following:

    <html>

    <head>

     <style>

      .button {

        border:0;

        width:110px;

        height:38px;

        background: url("background.png") no-repeat;

      }

     </style>

    </head>

    <body>

     <input type="button" value="Label" class="button"/>

    </body>

    </html>

    But it doesn’t work.

  14. Ryan Spahn says:

    Hi Max

    I couldnt get your code to work in regular IE.  

    Myself, Im working on a IE Mobile project and I need the buttons to change color upon mouseover/focus.  Im finding this to be not easy to accomplish with the limited capabilities of IE Mobile.

    I was able to add color to my buttons using this code this code.

    <INPUT TYPE="BUTTON" NAME="Btn1" VALUE="RPS" style="background-color: yellow; color: black;">

    Maybe that might help you?

    Anyone working on an IE Mobile site who needs help please email paul9290 <at> yahoo . com .  Maybe we could help one another!

    Peace, Ryan

  15. Tim Newton says:

    I can’t get the DISPLAY property to behave appropriately.  Any suggestions?

  16. Diana says:

    Hi,

    as I have seen in the upper list Pocket IE can handle "list-style-image". I tried it and it did not work.

    Here my sample code:

    =============================================

    <html><head><title>list-style-image</title>

    </head><body>

    <h4>List with my own Bullets</h4>

    <ul style="list-style-image:url(image.gif)">

    <li><b>TEST</b></li>

    </ul>

    </body></html>

    ==============================================

    Does anybody have an idea why my sample does not work?

    Many thanks,

    Diana

  17. Bruno Ambrózio says:

    I have a <div> and when i try :

    object.style.display = ‘none’ – to hide or

    object.style.display = ” – to show,

    don’t works. Any idea?

    Thanks.

  18. Bruno Ambrózio says:

    I have a <div> and when i try :

    object.style.display = ‘none’ – to hide or

    object.style.display = ” – to show,

    don’t works. Any idea?

    Thanks.

  19. marcomelli says:

    I have problem to set the width:170px to a button.

     <tr>

     <td><input type="submit" name="MenuTree1$14" value="SA Organbezogene" id="MenuTree1_14" style="font-family:Arial;font-size:9pt;width:170px;" /></td>

    </tr>

    It seems to be ignored by Pie.

    Any suggestion?

    Thanks,

    Marco

  20. marcomelli says:

    I have problem to set the width:170px to a button.

     <tr>

     <td><input type="submit" name="MenuTree1$14" value="SA Organbezogene" id="MenuTree1_14" style="font-family:Arial;font-size:9pt;width:170px;" /></td>

    </tr>

    It seems to be ignored by Pie.

    Any suggestion?

    Thanks,

    Marco

  21. Desmondo says:

    In response to Max Cheban’s button image question:

    I too have been battling to use images for buttons on a mobile device – My solution was to use an image file as a link as below.

    <A href="#" onclick="locate()" class="functionButton" ><img alt="Locate" id="locateButton" name="locateButton" class="functionButton" src="Buttons/LOCATE.gif"></A>

  22. a.chao says:

    Is this chart reliable? Because text-indent is not working for me at all. Really.

  23. Valentin says:

    Anybody know how implement "overflow:auto" in Pocket IE?

  24. Hardik says:

    I created one asp.net web application and hosted it on windows server 2003. I used absolute position in HTML for image view. But when i tried to view that on Pocket pc device it is not display on the right place. On desktop, It will display good.

    I think, Absolute position is not working on pocket pc. Can you please suggest me how can i solve this problem?

  25. Matt says:

    I try to make a prototype for an app using XHTML. The images I use are 240×320, so the should fit exactly on the phone, but I keep getting scrollbars. Tell Valentin and my how to implement overflow! (I want it "hidden")

  26. sts says:

    Hi, I want to change the default default text color of html links. The default is blue and link background is also blue and completely invisible. The css settings work for symbian but not for PIE. Is there a css solution or PIE setting change.

    Thanks in advance

  27. mgwalk says:

    I can’t get position to work on 2K3

  28. jb says:

    Is it true?  I can’t set the WIDTH of an input through CSS?

    That seems really retarded!

    On a normal browser, that would be annoying, but suddenly on a small screen I can’t even tell it to make the form field small enough to fit!

    Who was the genius who came up with that idea!!!???

  29. Danie Kemper says:

    So … anyone know why pocket IE 5 forces button width value to be the same for all buttons on a page?  I don’t undertand the logic in that decision.  Poor.  Very poor.

    Dan

  30. aaronsnobel@aaronsnobel.ca says:

    IE Mobile best way to align labels and textboxes.

    or inputs if you will.

    I have a <div><asp:label><asp:textbox></div> I want them to align vertically centered and spaced nicely.

    right now my inputs are about 30px below vertical centre to the spans/labels.

Comments are closed.

Skip to main content