Sent by Isabel Santos on 18 October 2004 22:10
Hi all,
hope this isn't out of scope, both on css-d and wsg:
On the template I'm working on, I decided it would be cool to give it a pda friendly version, for
the target public would be kind of eager for new technologies.
Following the ALA article on taking your site into the smaller screen, with some adaptation to my
font options previous definitions, I created a second style sheet to be called under Handheld
devices and to overwrite any normal css rule.
I assume it is correct to inserte it like this:
<link rel="stylesheet" type="text/css" href="lib/defaultstylesheet.css" media="screen">
<style type="text/css" media="handheld">
@import url(lib/01pda.css);
</style>
<style type="text/css" media="screen" title="principal">
@import url(lib/principalquasar40.css);
</style>
Not owning a pda myself, I built this using the Opera's small screen mode on a shrank window.
Now I saw the uploaded page on a friends pda and got surprised:
I get the header part of the page (broken yet on color) and the first navigation bar. Nothing
else.
It seams to me that the pda is trying to render the normal css (principalquasar40.css) and not the
pda's one - 01pda.css (where the central column should occupy all the screen not showing any body
background and widths should be mutch smaller).
I'm using fully standard html 4.01 strict valid code and the css files are valid.
I'm also using javascript to manipulate the dom to create the appearence of a shadowed text (in
order to avoid a double header text on text browsers, a script from
http://www.kryogenix.org/code/browser/aqdropshadow/) on the header and a colapsing menu on the
right (from http://www.onlinetools.org/tools/puredom/index.html) - wich works on mozillas, opera
7.5 and iewin 5.5 and 6 without problems at least on my pc. The script isn't supposed to work or
give any error on browsers that do not supporte the DOM, since it is only meant for presentational
issues.
I then decided to look arround for more info; I found this text on one of the sites google gave me
upon the search for "pda+web design":
________________"
There are four basic rules to create a good site for a palm sized device:
1: Stick to basic HTML tags such as: P, BR, B, I, PRE, headers (H1-6), BLOCKQUOTE, CENTER, UL, OL,
LI, images, tables
2: Avoid frames, layers, imagemaps, plugins, Javascript, Java, and CSS
3: Keep your screens small, and avoid clutter
4: Be aware of how graphics are displayed
"_______________
Now, I can live with pda giving me like 1 taller size for h1 headers and the rest of the fonts at
the same size, optimizing or reducing images, and so on.
But what this tips tell me is that I should not use the standards to write code for pdas, wich
means, if I really want to show the site on smaller screens, I will have to work on another
version.
Are my conclusions true?
Or can there be another reason for the pda not to be showing what is intended, like not supporting
scripting and messing up the rendering, being downloading the screen css and not the handheld for
precedence issues over the css title, the css being to big for its buffer, anything...
The site is at:
http://unbound.no.sapo.pt/acad/index.htm
Thank you very mutch in advance,
Isabel Santos
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/