CSS Chrome & Firefox | Text in FF hat Standard margin-top oder ähnliches...

[Rockhound]

Hi Leute,
ganz einfache Kiste hoffe ich... such mich aber jetzt echt dämlich, daher die Frage an Euch.

Bastel gerade an einer Seite für einen Freund: www.mohr-fotografie.de

Im Firefox stimmt die Seite bzw der Text ist automatisch in den <div containern vertikal zentriert. Im Chrome wird er eher korrekt angezeigt, nämlich ganz oben des Containers. Schieb ich den Text nun aber herunter mit padding-top: 5px z.b. dann ist er im Chrome mittig aber im Firefox dann zu weit unten..

Sicherlich wieder ein Anfängerfehler. Wer kann mir weiterhelfen?

Gruß
Daniel

[edit]
Ich glaube ich habe es.. Kann es sein das es an der Schriftart liegt? Das Chrome und Firefox die anders interpretieren und daher ein anderer Abstand nach OBEN dadurch entsteht?

[edit2]
Jo, so ist es. Habe nun Arial genommen und es passt. Gibt es irgendwo eine Liste mit Schriftarten die jeder Browser exakt gleich anzeigt?

 

[Kausalat]

Legst du die Höhe der halbtransparenten Titelleiste (.botgal) nicht auf genau 35 Pixel fest, sondern lässt ihre Höhe dynamisch durch den Inhalt bestimmen, kannst du den Innenabstand mittels padding problemlos anpassen, sodass dieser browserübergreifend gleich dargestellt wird.

 

[Rockhound]

Danke Dir.

Hast du mir noch eine Idee wie ich das Logo NICHT transparent bekomme so das aber der Weiße Hintergrund zu 80% transparent bleibt?

 

[Kausalat]

Dem Elterncontainer #logo kannst du mittels background: rgba(255,255,255,0.8) halbtransparent machen, ohne dass die innenliegende Logografik transparent wird.

Zu deinem vorigen Anliegen: Ich empfehle dir wirklich meinen Lösungsvorschlag, da du zwangläufig immer wieder Abstandsprobleme bekommen wirst, wenn eine andere Schriftart eingesetzt wird. Auf Adroid-Smartphones zum Beispiel gibt es keine Arial, sondern als Ersatzschrift Roboto, die wiederum ganz anders skaliert werden könnte. Mit padding gehst du nahezu unabhängig von der Schriftart sicher.

 

[Rockhound]

Ah ok, werde ich mal testen.
hab mir jetzt einfach ein 1x1px PNG erstellt mit 80% Transparenz und das mittel background-image eingefügt und die transparent geschichten ganz weggelassen via CSS.

Danke Dir vielmals!

 

[Kausalat]

Man hilft doch gern mit Vorschlägen weiter, die letztlich sowieso anders umgesetzt werden.