Steuerung mit Padding Unterschied im IE und Firefox/Chrome

neuling11 · 31. Dezember 2010

Hallo,
ich möchte bei meiner website eine Steuerung links und eine Oben,
wo dann links eine weitere Auswahl getätigt werden kann.
Nur wenn ich über den Code (oberesteuerung ist in kopfbereich)

Html:

Code

<div  id="kopfbereich">
 <div id="oberesteuerung">
 abalfsldflasdfl




 </div>
</div>

CSS:

Code

#kopfbereich {
    background-color: yellow;
    background-image: url(bilder/meinlogo.png);
    height: 200px;
    width: 1000px;
}




#oberesteuerung {
    background-color: silver;
    height: auto;
    width: 550px;
    padding-top: 170px;
    padding-left: 200px;
    text-align: left;
}

Alles anzeigen

Dann sieht das ganze wie auf den bilder aus.

(Der Bereich ist Grau unterlegt, damit ich auch sehe, was ich mache)

Wie kriege ich es hin, dass es auch bim IE richtig dargestellt wird?[attachment=1]paddingie.jpg[/attachment][attachment=0]paddingchrome.jpg[/attachment]

Sarkkan · 31. Dezember 2010

1. Eine Navigation/Steuerung ist Semantisch gesehen eine Auflistung von Links (also <ul> :wink: )

2. Spontan weiß ich nicht ganz, was du meinst.. aber versuch es mal damit, dass du dem Kopfbereich (Header) ein position: relative; gibst, dann kannst du die Steuerung mit position: absolute; sowie top/right/bottom/left positionieren
Sollte dann einheitlich sein
(Außerdem empfiehlt es sich ein CSS-Reset zu verwenden, oft wird dadurch solche Unterschiede auch ausgeglichen.
Hier hast du ein gutes Reset-Stylesheet:

Code

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0}

Hoffe konnte helfen, wenn nicht bitte noch mal schreiben
Sarkkan

neuling11 · 31. Dezember 2010

Hallo,
danke... habe den Fehler nun doch gefunden.

Code

float:left;

hat gefehlt.
Der IE hats dann wahrscheinlich in die Mitte gesetzt.

Das mit dem Reset CSS ist mir neu.
Muss mich mal damit auseinandersetzen :idea: .

revils · 31. Dezember 2010

Für was ist denn das Reset-CSS?

Sarkkan · 31. Dezember 2010

Jeder Browser stellt alle Sachen unterschiedlich dar, eines der besten Beispiele: das Absatz-Element <p>, so wie die Überschriften(<h1>, <h2>, <h3>,..).
In fast jedem Browser/Bei fast jedem Engine ist der Abstand zu einem anderen Element anders (margin), oder die Schriftgröße beträgt bei dem einen mehr als bei dem anderen.
Besonders die unterschiedlichen Standardabstände bei den verschiedenen Browsern sind tückisch und haben oft zur Folge, dass Sachen bei dem Browser X und Y passen, aber dafür bei Z sich alles verschiebt,.. all sowas gleicht das reset aus.
So kannst du ungefähr davon ausgehen, dass deine Seite in jedem Browser etwa gleich aussieht, was ja auch dein Ziel sein solle [:

(und wieso man nicht einfach das Asterisk ist auch recht schnell erklärt: Der Performance wegen. Der Browser benötigt bei dem Asterisk wesentlich länger, als wenn man jedes Element, was verändert werden soll einzeln ändert, da so der Browser z.B. veraltete Sachen nicht ändern muss,..
Theoretisch kannst du auch einige Elemente aus dem Reset entfernen, wenn du diese nicht verwendest )

Steuerung mit Padding Unterschied im IE und Firefox/Chrome

Jetzt mitmachen!

Teilen