✔ Schriftprobleme zwischen IE 6 und Firefox 0.8

[chrislennep]

Also ich habe ein kleines Problem, welches vielleicht simpel sein mag, ich momentan aber nicht drauf komme:

CSS CODE

body { }
#main {position: absolute;
   width: 780px; height: 500px;
   background-color:#ffffff;
   margin-top: 50px;
   margin-left: 50px;
   }
#header {position: absolute;
   top: 0px; left: 0px;
   width: 775px; height: 50px;
   }
#headerinhalt {position: absolute;
   top: 0px; left: 5px;
   width: 765px; height: 40px;
   color: #ffffff;
   font-weight: bold;
   }
#eins {position: absolute;
   top: 50px; left: 5px;
   width: 775px; height: 5px;
   background-image: url(../jpg/eins.jpg);
   }
...

Das Problem ist, dass IE 6 die Schrift die ich habe komplett oben bei 0px ansetzt und der Firefox ungefähr ein Return weiter unten. Und zwar alle gleichzeitig. Die Schrift im header, im menue und im text feld.

Hier die Seite:
verwaister Link

Der Unterschied wird nur sichtbar wenn IE und Firefox benutzt werden!
Ziel ist, dass die Schrift auf der selben Höhe in beiden Browsern startet, wenn möglich auch in allen Browsern ;-)

Danke schon mal Christian

 

[hela]

Hallo chrislennep,

setze mal margin und padding im HTML- und im BODY-Selektor auf Null (oder auf einen anderen diskreten Wert). Das löscht die Initialwerte, die bei den Browsern unterschiedlich sind.
Die Position des Textabsatzes im Header kannst du über den Innenabstand (padding) des Headers und/oder über den Aussenabstand (margin) des Textabsatzes (p-Tags) regeln. Dazu fügst du am besten einen kontextsensitiven Selektor (das heisst wirklich so) in deine CSS-Datei ein.
Zum Beispiel:

#header {
position: absolute;
top: 0px;
left: 0px;
width: 775px;
height: 50px;
padding: XXpx ... ;
}
#header p {margin: YYpx ... ;}

Dieser Aussenabstand wirkt dann allein nur auf den Textabsatz im Header.

Ich hoffe das hilft dir.

edit:
Habe gerade gesehen, dass der Textabsatz mit der URL nicht im Header sondern im "headerinhalt" sitzt -also völlig analog.

 

[chrislennep]

Hmm, also irgendwie verstehe ich die Antwort nicht so recht.
Ich glaube auch, dass du dich zu sehr auf den headerinhalt konzentriert hast. Es geht mir nicht um die Ausrichtung im headerinhalt, sondern um die Ausrichtung aller Texte auf der Seite. Oder hast du das doch bedacht? Jedenfalls habe ich mit margin und padding schlechte Erfahrungen gemacht, da diese Tags von den Browsern komplett unterschiedlich interpretiert werden.

Ich will eigentlich erreichen, dass der Abstand zum oberen und unteren Seitenabstand prozentual variabel ist und dass der Text eine einheitliche Startposition hat. So, dass ich die Hintergrundbilder an die Textstellen anpassen kann.

Ich hoffe, dass hat allen geholfen. Ansonsten werde ich deine Möglichkeit versuchen umzusetzen, aber irgendwie fehlt mir da der Durchblick.

edit: Ich konkretisiere das Ganze besser mal:
Habe jetzt margin etc. auf 0 gestellt und sehe die Startausrichtung der Seite.

Im IE ist zu beiden Seiten ein weißer Rand, im Firefox ist nach oben aber kein Rand. Dadurch kommt die Schriftverschiebung zu Stande.

Desweiteren habe ich schon mal einen teilerfolg erzielt. Mit dem header das klappt jetzt. Ich habe auf margin 0 in der #main im css gestellt und habe dann den Befehl #header p {margin: 9px;} eingesetzt. Klappt wunderbar. Aber ich kann es nicht auf das Menü und den Text analog anwenden? Warum nicht?

 

[hela]

Das verstehe ich nun wieder nicht:

Ich will eigentlich erreichen, dass der Abstand zum oberen und unteren Seitenabstand prozentual variabel ist und dass der Text eine einheitliche Startposition hat. So, dass ich die Hintergrundbilder an die Textstellen anpassen kann.

Deine CSS-Eigenschaften, also Breite und Höhe deiner DIV-Blöcke sind alle absolut. Was soll jetzt noch "prozentual variabel" werden?

"Schlechte Erfahrungen" mit padding und margin macht man eigentlich nur, wenn man das BOXMODELL nicht kennt. Einzelheiten sind hier zu finden: http://www.css4you.de/wsboxmodell/index.html.

 

[chrislennep]

Also nach langer grübel Phase bin ich hinter deine 1. Antwort gestiegen. Das mit dem Text klappt jetzt soweit. Der hat dieselbe Startposition. Danke!

Aber wie schaffe ich es, dass ich die gesammte Seite nun im IE und im Firefox komplett gleich platzieren kann?

Grüße Christian

Hab den ganzen Kram nochmals hochgeladen!