Liste liegt übereinander

[Zer0]

Servus,
mein Problem wurde eigenartig betitelt, um zu sehen was ich meine, einfach den Anhang anschauen, da wird vermutlich schnell deutlich, wo hier das Problem liegt (Screenshot auf iPhone 3G)

Auf normale Umgebungen (Windows/Mac) funktioniert das Ganze. Wobei auf einigen Windows-Rechner selbiger Effekt dargestellt wird.
Die Box links (Navi) wird auf dem Handy irgendwie zu groß dargestellt. Dadurch kommt es zu einem Zeilenumbruch (denke ich) und dann klappt da etwas nicht, sodass "er" anfängt zu überlagen.

Hätte vll. einer eine Idee, wie dieser Fehler behoben werden könnte?

Danke euch.

Gruß,
Zero

[Jürgen]

Hallo Zero,

der Fehler kommt ganz klar von der Höhe, die du den Listenelementen per CSS zuweist:

#wrap #inhalt #sub_navi li { 
list-style-image: url("http://peddinghaus.de/mobil/style/liste.jpg");
width: 290px;
height: 25px;
} 

Die "height: 25px;" definiert ja eine feste Höhe. Der Browser entscheidet dann über die Einhaltung oder Erweiterung.
Lass die Höhe weg und gib den Listenelementen eine line-height sowie ein padding und/oder margin für oben und unten. Dann sollte das auch auf dem iPhone hinhauen!
Generell empfehle ich, auf relative Größenangaben umzusteigen, also em anstatt px zu verwenden.

Grüße,
Jürgen

[Zer0]

Da hätte man auch mal selber drauf kommen können.. Allerdings ändert dies nichts an der Tatsache, dass die Schrift eigentlich gar nicht gebrochen werden dürfte, weil doch die 290 Pixel in der Breite reichen (sollten), wieso tun sie das auf dem mobilen Gerät nicht, aber auf allen Rechnern?

Danke aber schon mal.

[Jürgen]

Servus nochmal,

du musst - gerade bei mobilen Endgeräten - von der Fixierung auf "Pixel" weg. Generell kannst du einem Browser heute nicht mehr vorschreiben, wie groß etwas zu sein hat, vor allem nicht bei der Schrift. Das iPhone skaliert den Text je nach Zoom und zur Verfügung stehender Breite völlig autonom. Demnach ist der einzig gangbare Weg, auf relative Größenangaben umzusteigen bzw. in deinem Fall wenigstens die Höhe nicht vorzugeben.

[Zer0]

Ich schraub hier mal 'ne Runde herum, vielen Dank.

Problem ist nur, dass hier alles fest skaliert vorliegt und ich da nach einem Schlupfloch gesucht habe

[hero-master]

Hi Jürgen,
schön von dir mal wieder hier zu hören

Das iPhone skaliert den Text je nach Zoom und zur Verfügung stehender Breite völlig autonom. Demnach ist der einzig gangbare Weg, auf relative Größenangaben umzusteigen bzw. in deinem Fall wenigstens die Höhe nicht vorzugeben.

Den Gedankengang kann ich irgenwie nicht ganz nachvollziehen. Gerade dadurch, dass die Browser heutzutage alle zoomen (und man nur noch geringe Rücksicht auf den IE6 nehmen muss), ist es doch gerade egal welche Einheit man für die Schriften verwendet?
Das müsste doch beim iPhone genauso sein oder sehe ich da was falsch?

Ich persönlich gebe zunächst immer dem body eine feste Pixelgröße und hangel mich von da an mit % von Objekt zu Objekt.

@zero: Du kannst für das iPhone auch spezifische Styles definieren. Aber bei deinem kleinen Problem löst du es schon mit der Entfernung der Höhe (die hier auch wenig Sinn mach). Ich würde dir zusätzlich noch empfehlen neben der Verdana zumindest eine (konkrete) Ersatzschrift zu definieren

[Jürgen]

Oh, ein alter Bekannter Hi!
Eine Schriftgröße in Pixel hat streng genommen nichts im CSS verloren

Natürlich ist durch das Zoomen der modernen Browser das Problem ein wenig verschoben, aber es gibt nach wie vor eine Schriftskalierung, die unabhängig vom Website-Zoom ist. Das ist in IE8 so, und auch in Safari und FF gibts die Möglichkeit "nur Text zoomen". Wie sich dann der Browser bei Schriften in Pixel verhält, ist unterschiedlich. Der IE8 z.B. skaliert sie schlicht nicht, wenn sie Schriftgörße in Pixel angegeben ist.

Beim Safari Mobile auf dem iPhone ist das wieder ein wenig anders, denn dort hat man die nötige Breite nicht zur Verfügung, um das Layout so abzubilden wie bei der Desktop-Version. Das iPhone "mogelt" deshalb ein wenig, damit die Schrift lesbarer wird.

Generell ist deshalb eine barrierearme Codierung anzuraten - und die beinhaltet in der Regel relative Größenangaben bei Schrift und ggf. auch bei Layoutbreiten.

Grüße,
Jürgen

[hero-master]

Ja super, schon biste ein Tag mal hier, lernt man was

Der IE8 z.B. skaliert sie schlicht nicht, wenn sie Schriftgörße in Pixel angegeben ist.

Das ist ja wieder einmal ne doofe Sache, da dachte ich schon das sei seit dem Tod des IE6 vorbei. Hatte das nur im FF getestet mit "Text zoomen".
Okay, dann wieder zurückrudern und mit em arbeiten

Das iPhone "mogelt" deshalb ein wenig, damit die Schrift lesbarer wird.

Da ham die schon mehr ppi und müssen trotzdem mogeln, tztz

Generell ist deshalb eine barrierearme Codierung anzuraten

Das auf jeden Fall! Da bin ich dabei