Unterschiedliche Abstände im Firefox zu anderen Browsern

[kweb]

Hallo Gemeinde,
ich komme bei einem Problem nicht weiter. Hier ist meine Seite:

http://altenheim-waldblick.de/

Und zwar geht es um den Bereich der Schriftskalierung. Im Firefox kleben die Skalierbuttons unten am gelben Feld, in den anderen Browsern sind sie genau mittig. Wenn ich sie im Firefox richtig ausrichte mit diesen Definitionen

.skalierung{
padding-top: 5px;
margin-right: 3px;
}

.jfontsize{
float: right;
}

.skalierung p{
float: right;
padding-right: 3px;
}

dann sind sie in den anderen Browsern falsch. Kann mir jemand sagen woran das liegt?

Gruß
kweb

 

[threadi]

Habs jetzt nur im Firefox versucht nachzustellen. Nimm deine o.g. Eigenschaften raus. Dann ergänzt Du:

.skalierung { text-align: right; }

.skalierung p { display: inline; }

.jfontsize { display: inline; }

und tauschst im HTML-Code noch das p mit dem div.

 

[kweb]

Habs jetzt nur im Firefox versucht nachzustellen. Nimm deine o.g. Eigenschaften raus. Dann ergänzt Du:

.skalierung { text-align: right; }

.skalierung p { display: inline; }

.jfontsize { display: inline; }

und tauschst im HTML-Code noch das p mit dem div.

Hi, danke für dein Antwort. Aber so wie du es beschreibst ist es ja nicht mittig. Ich möchte ja nicht die Skalierungs-Buttons oben rechts im gelben Feld kleben haben, sondern ich möchte einen Abstand, nach meinem Denken padding-top: 3px; und padding-right: 3px; ergänzen, damit etwas Luft ist zum Rand des gelben DIVs. Und genau hier gibt es ja die Probleme. Sobald ich padding oder margin anwende gibt es die unterschiedlichen Darstellungen in den Browsern. Ich habe jetzt mal deine Variante und .skalierung mit den padding-Eigenschaften ergänzt: Gleiches Ergebnis :(

 

[kweb]

Hat keiner mehr eine Idee?!

 

[Tronjer]

- Bei .yellowbreak1 gleiche Werte für height und line-height
- Bei .skalierung das padding-top löschen
- Bei .jfontsize-button padding: 0 3px

 

[threadi]

Den Abstand nach oben kriegst Du mit einem zusätzlichen padding nach oben von 5px in .skalierung hin.

 

[kweb]

- Bei .yellowbreak1 gleiche Werte für height und line-height
- Bei .skalierung das padding-top löschen
- Bei .jfontsize-button padding: 0 3px

Hi,
danke für die Tipps, es sieht schon besser aus aber wirklich 100% ist es nicht. Wenn ich für line-height und height gleiche Werte in yellowbreak1 gebe, kleben die Buttons wieder unten und sind nicht mittig. Ich müsste line-height auf 24px setzen, damit es im FF mittig ist. Im IE zB ist es aber immer noch unterschiedlich. Noch eine Idee?

LG
kweb

 

[Tronjer]

Ich hatte es mir nur im Firebug angeschaut, aber stimmt schon, wenn man pixelgenau mit margin/padding positionieren will, kann es in älteren IE-Versionen Abweichungen kommen.

Wähle doch für die HTML-Struktur einen anderen Ansatz. Sieht ohnehin nicht schön aus, dass die Bilder von Rand zu Rand gehen und die Abstände in der Mitte weiß sind.

- Elternelement mit dem gelben Background.
- Darin drei Kindelemente: links der Slider, Mitte 'Unser Haus' und rechts sowohl das Bild als auch das Wort 'Schriftskalierung' und die Links.
- Innerhalb des des rechten Div brauchst du kein weiteres Blockelement mehr. display: block auf das Bild und Wort/Links direkt hintereinander.
- Wort und Links sollten sich dann vom linken Rand des Divs per margin/padding verschieben lassen. Als zusätzlicher Selektor ließe sich das Wort noch in einem Inline-Tag wie <span> einbetten.
- Falls es dann mit dem Abstand unterhalb der Links für den IE immer noch nicht stimmt, lässt sich das über eine fixe height des gelben Elternelements regulieren.

 

[kweb]

Hi,
interessanter Ansatz von dir, ich werde das mit dem Chef besprechen. Allerdings muss man auch sagen, dass es nicht an "älteren Browsern" liegt. Auch der Google Chrome zeigt mir einen Versatz. Chrome und der IE verhalten sich gleich, Firefox hat den Unterschied. Es kann also nicht an neu/alt liegen.

LG
kweb

 

[Tronjer]

Alternativ dazu würde ich dir raten, die Seite mit den Standardklassen und dem fluiden Grid von Twitter Bootstrap zu bauen, in der Version 2.3.2 wird auch noch der IE 7/8 unterstützt. Ist vielleicht etwas mehr Lernaufwand, aber damit vermeidest du die genannten Probleme.