Mobile Web Design

Web-Entwicklung für Nokia S60-Series

Immer wieder fällt mir beim entwickeln von mobile-sites bzw. beim rumsurfen mit Nokia S60 Geräten (z.B. nativer Browser des E65) ein unnötiger horizontaler Scrollbalken auf, der lediglich ca. 5px scrollen nach rechts zulässt und dabei aber nichts neues anzeigt.

Der Grund ist offenbar das styling von margin/padding sowie die Breite (per default 100%) einer “ul”.

Dies erzeugt den horizontalen Scrollbar:

ul {
margin: 10px 2px 10px 20px;
list-style-type: square;
line-height: 1.2em;
}

Dies hier nicht:

ul {
width: 90%;
margin: 20px 0;
list-style-type: square;
line-height: 1.2em;
}

ul li {
margin: 0 2px 0 20px;
}

Hier gelöst: mwxp.mobi

Desweiteren zeigt mein E65 gepunktete Linien (dotted) gar nicht an, nur durchgezogene (solid):

Geht: border-top: 1px solid #339;
Geht nicht: border-top: 1px dotted #339;

Hat jemand andere Erfahrungen oder Ergänzungen?