Stylesheets - @media handheld on Windows Mobile 5/Treo

Author

@media handheld on Windows Mobile 5/Treo

Harlan Messinger

2007-10-07, 6:17 pm

English Wikipedia allows registered users to define custom styles. I
created a set of styles inside a @media handheld wrapper to see if I
could override the default absolute positionings and floats of the major
page elements in IE on my Sony Treo with Windows Mobile 5.

Without the custom CSS, on both the regular computer and the handheld,
the content's beginning is offset from the top and left, and on the
handheld it only takes up a fraction of the full width of the screen.

When I add my CSS *without* the @media handheld {} wrapper, then the
display looks as I expect on both the computer AND the Treo, with the
content beginning in the upper left-hand corner of the window and taking
the full width of the screen. Also, a pair of navigation links that has
display: none by default in Wikipedia's styles is displayed because I
override that with display: block, and other style overrides of mine appear.

Once I wrap my CSS in @media handheld {}, though, *some* of my styles
continue to take effect on the Treo, but others don't. The navigation
links that I reveal continue to appear, and other text formatting
changes appear as well. But on the Treo the content offset has returned.
I can't figure out why some but not all of the rules would continue to
be effective on the Treo when I use @media handheld.

The CSS is below. Any ideas? I realize I can't give you a Wikipedia page
to look at, since you'd have to be logged in under my account to see all
this anyway. But I wondered whether any of you know more generally about
this inconsistency.

@media handheld {
div#jump-to-nav { display: block; font-style: italic; }

div#topicon { position: static; }

body div#column-content {
display: block;
position: static;
float: none;
clear: both;
margin-left: 0px;
margin-top: 0px;
width: 100%;
padding-left: 0px; }

body div#column-content div#content {
display: block;
position: static;
float: none;
clear: both;
margin-left: 0px;
margin-top: 0px;
width: 100%;
padding-left: 0px; }

div#column-one { position: static; padding-top: 1em; }

#p-logo { position: static; }

.portlet h5 { margin: 0.5em 0; }
.portlet li { white-space: nowrap; }

#p-cactions { position: static; padding-left: 0; white-space: normal; }
#p-cactions h5 { display: block; }
#p-cactions ul { margin: 0; }

#p-personal { position: static; white-space: normal; }
#p-personal h5 { display: block; }
#p-personal ul { text-align: left; padding: 0; }

div#p-logo { display: none; }

#footer { margin: 1em 0; }

}

Harlan Messinger

2007-10-07, 6:17 pm

Harlan Messinger wrote:
[snip]

With some fresh resolve, I created my own simple test case and found out
that IE on my handheld will process all the rules meant for @media
handheld if I place each of the rules in its own @media handheld
wrapper! Problem solved, though annoying.