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:
[Author: Jay McLain]
Comments
Anonymous
August 16, 2004
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?Anonymous
August 16, 2004
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.Anonymous
August 17, 2004
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> on a WM 2003 device and change the theme and font size. It works!
Steve
Silicon Valley Pocket PCAnonymous
September 02, 2004
Hi, you just copied the list from the W3C pages. Most of them are not supported by PIE.Anonymous
May 06, 2005
Well I'm finding that very crucial ability to use absolute positioning doesn't work on PIE. Arg! That means TABLES.Anonymous
October 11, 2005
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!)Anonymous
October 11, 2005
The comment has been removedAnonymous
October 31, 2005
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;).Anonymous
February 20, 2006
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 ...Anonymous
March 14, 2006
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
Anonymous
June 14, 2006
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.Anonymous
July 18, 2006
The comment has been removedAnonymous
August 27, 2006
PingBack from http://adumont.hopto.org/~adumont/blog/2006/08/28/pocketie-loads-screen-css-stylesheets/Anonymous
November 09, 2006
The comment has been removedAnonymous
November 09, 2006
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, RyanAnonymous
November 17, 2006
I can't get the DISPLAY property to behave appropriately. Any suggestions?Anonymous
November 28, 2006
The comment has been removedAnonymous
January 31, 2007
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.Anonymous
January 31, 2007
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.Anonymous
March 22, 2007
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, MarcoAnonymous
March 22, 2007
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, MarcoAnonymous
April 24, 2007
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>Anonymous
May 24, 2007
Is this chart reliable? Because text-indent is not working for me at all. Really.Anonymous
June 10, 2007
Anybody know how implement "overflow:auto" in Pocket IE?Anonymous
December 02, 2007
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?Anonymous
January 07, 2008
I try to make a prototype for an app using XHTML. The images I use are 240x320, 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")Anonymous
March 25, 2008
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 advanceAnonymous
April 10, 2008
I can't get position to work on 2K3Anonymous
May 13, 2008
The comment has been removedAnonymous
June 11, 2008
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. DanAnonymous
April 28, 2009
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.