✔ div Positionierung im IE

O

OffizierDoofy

Mitglied
Hi!

Ich probier seit zwei Stunden einen div-container mit dem Logo der Website im IE links zu positionieren. Im Firefox wird er korrekt angezeigt und ist schön linksbündig, im IE wird aber aber zentriert angezeigt.

CSS der Seite:
#seite {
margin: 0 auto;
padding-bottom:10px;
padding-top:20px;
position:relative;
width:700px;
}

CSS von dem div-container mit Logo:
#header {
left: 24px;
top: 5px;
height: 87px;
width: 200px;
background: url(logo.png);
}


Was is da falsch?

Danke.

MfG
 
Hi,

im Stylesheet ist abgesehen von der fehlenden Angabe zur Positionsart für #header (position:absolute oder position:relative), damit die Positionsangaben left:24px und top:5px auch greifen, nichts falsch. Vielmehr übergibst du das HTML-Dokument wohl nicht im standardkonformen Modus, denn im sog. "Quirksmodus" interpretiert der IE das CSS-Boxmodell falsch bzw. nicht - in deinem Fall trifft es auf margin:0 auto für #seite zu, um den Block im Viewport horizontal zu zentrieren.

Lösung: Einen Dokumenttyp deklarieren, der das HTML-Dokument im standardkonformen Modus übergibt - siehe hierzu Der »DOCTYPE-Switch« und seine Auswirkungen.

mfg Maik
 
Wie oder besser welchen Doctyp muss ich dann deklarieren?

Aktuell hab ich :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
Dann sollte es bei dir, wenn du für #header noch die fehlende Angabe zur Positionsart hinzufügst, keine Positionierungsprobleme im IE geben - bei mir funktioniert der "ergänzte" CSS-Code mit deiner Doctype-Wahl im IE einwandfrei.

Code: 
#header {
position:relative;
left: 24px;
top: 5px;
height: 87px;
width: 200px;
background: url(logo.png);
}


mfg Maik
 
Mittlerweile glaub ich, dich vorhin mißverstanden zu haben (wegen dem doppelten "aber", wo ich ein "nicht" hineininterpretiert habe), und vermute, dass sich in deinem Stylesheet noch folgende Regel wiederfindet, die wegen der angesprochenen fehlenden Angabe zur Positionsart für #header im IE dazu führt, dass dieser Block im Anzeigebereich horizontal zentriert wird.

CSS: 
body { text-align:center; }

Firefox & Co richtet den Block zwar "schön" linksbündig aus, jedoch nicht mit seinen festgelegten Startpositionen von oben und links ;)

mfg Maik
 
Perfekt! Genau das war das Problem

Aber selbst wenn ich die Positioniersart deklariere, wird das Logo mittig angezeigt.
Aber ohne alig center gehts. Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück