

/*This a mobile extension for the Wireless Industry site in phase02-03. It uses pulldown navigation to display the top 10 articles. Subscribers can't add content because of the agony in keying in the link and synopsis data, but they can rate the articles they read. The site is designed to share RSS feeds with the main desktop site.



The template contains elements in a 



General Mobile Notes:

1. Use pixels (px) when designing for mobiles. Handset screens sizes are in pixels, so it makes sense to design with the same unit of measurement. Start thinking of fonts sizes in pixels.

 

2. Comments refer to "small" and "large" screens. "Small" is 128px wide. "Large is 176px or wider, and is typical of Symbian 60 devices. Two screens may be physically almost identical. However, the "large" one will have more pixels. 

 

Smaller pixels increase resolution, yet also create smaller text.3. The smallest text size is "xx-small," which is approximately equal to 9px on Nokia and Opera browsers (Roman Alphabet). ACCESS NetFront can render "xx-small" as a difficult-to-read 8px on small screens and approximately 9px on larger screens (Roman Alphabet). Use "font-size: xx-small" when you need a font less than 10px. Handsets can have trouble displaying a 9px font, but will display a 9px font when you apply a "xx-small" tag. You will probably have to do your own research on what font tags a carrier supports.

 

4. Microbrowsers default DIV tags to "width:100%" unless you specify a width. DIVs are therefore stacked by default.

 

5. SPAN tags can be placed side-by-side, but, depending on usage may require a specific height and/or width. Unlike a table cell, a SPAN can collapse even though you have put something in it. The combinations of SPAN and DIV that cause a collapse vary. You have to test on an actual device in order to see what works. Adobe GoLive Preview Mode renders code that works on the desktop, but may behave differently on a phone.

 

     a. Percentages applied to SPANs are ignored by the Opera and Nokia browsers. SPANs that sit side-by-side should either have no width applied, or be given specific widths in pixels.

 

     b. A SPAN that contains an image should be set to the width of that image or slightly wider. Without a setting, the SPAN may expand to an odd width, and the image may shift inside it. There are exceptions to the rule, but until you have experience with them, use the rule for client situations.

 

6. Apply all the link styles to any link text, otherwise you will see color changes and/or underlines on some handsets. The display depends on the browser and handset configuration. Microbrowsers ignore the "a:hover" tag. Instead, a link will be outlined. Set all link tags the same unless there is a reason the User should see what pages he or she has visited.

 

7. The Opera desktop and microbrowsers read many tags identically. However, there are enough differences for you to consider the desktop display an approximation of the microbrowser.

*/

body         { background-color: #8393ca; text-align: left; margin: 0; padding: 0 }



#page_box   /* This tag positions and sizes the table that contains page elements. Width is set less than 96%. The Nokia browser can add horizonatl scrolling when a tag is set above 96%. */  { text-align: left; position: absolute; top: 0; left: 0; width: 90%; height: 100% }



#popup_menu { font-size: xx-small; font-family: sans-serif; margin-bottom: 2px; width: 168px; border: inset 0 }



#center { text-align: center }



#choose_article { text-align: center; width: 168px }



#article     { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #5a669a; margin-top: 3px; margin-bottom: 5px; border-top: 1px solid #fff; border-bottom: 1px solid #fff }



#rate_box   { color: #fff; font-size: xx-small; font-family: sans-serif; text-align: center; padding-top: 2px; position: relative; width: 150px }



#rate_button { width: 34px }

