wie positioniert man sicher mit css im ie?

unique23

Aktives Mitglied
Thread Starter
Dabei seit
03.03.2004
Beiträge
759
Reaktionspunkte
2
habe mein css schön aufgebaut und alles sieht blendend aus... im firefox. leider gilt das nicht für den ie. mir scheint so, als ob er mit der absoluten positionierung seine probleme hat. mir zerschießts immer das layout im ie. weiß jemand eine lösung dafür?

ich habe hier mal mein css dokument drangehängt. verschachtelt ist bei mir alles mit divs im container und alle anderen elemente sind dann innerhalb aufgeführt.

bin unendlich dankbar für jede hilfe!

HTML:
/* CSS Document */
body {
	font: normal 16px Helvetica, Arial, sans-serif;
	text-align: left;
	padding: 0px;
	color: #fff;
	background: #014a7f;
}

h1 {
	font: normal 20px Helvetica, Arial, sans-serif;
	line-height: 22px;
	text-align: left;
	padding: 0px;
	color: #fff;
	background: #333;
}

.container {
	position: absolute;
	background: #fff;
	width: 768px;
	margin: 0px;
	align: center;
	padding: 0px;
	text-align:left;
	}

.top {
	position: absolute;
	color: #000;
	width: 768px;
	height: 112px;
	margin-top: 0px;
	margin-left: 0px;


}

#navcontainer {width: 182px; text-align: left; 
		border: 0px; 
		border-bottom: 1px solid #fff;; 
		margin-bottom: 2em;}

#navcontainer ul {margin: 0; padding: 0;	
  list-style-type: none;
  text-indent: 20px;letter-spacing: 1px;}
  
#navcontainer li {list-style-image: none;
  margin:0; border-bottom: 1px solid white;}

#navcontainer a {display: block;
  width: 182px;height: 20px;
  font: normal 16px Arial, Helvetica, sans-serif; }

#navcontainer  a:link, #navcontainer  a:visited {
  background: #0171BB;
  color: #fff;text-decoration: none; 
  padding-bottom: 0;}

#navcontainer li a:hover {
  background: #fff;  
  color: #000;text-decoration: none;}

#navcontainer li a#current {
  background: #fff;
  color: #000;text-decoration: none;}

.navi {
	font: normal 16px Helvetica, Arial, sans-serif;
	color: #000;
	width: 182px;
	
		
	position: absolute;
    margin-top: 150px;
	margin-left: 0px;
	line-height: 20px;
	padding-left: 0px;
	padding-right: 0px;
	
}

.content {
	font: normal 16px Helvetica, Arial, sans-serif;
    line-height: 22px;
	color: #000;
	background-color: #fff;
	
	width: 464px;
	
	margin-top: 340px;
	margin-left: 200px;
	
	padding-left: 0px;
	padding-right: 0px;
}
 
Du musst mit * html extra Hacks ins css schreiben für den IE.

z.B.

* html .content {
width: 459px;

margin-top: 336px;
margin-left: 194px;
}

Die Werte sind aber nicht richtig, nur Blind eingegeben. Das hängst Du so noch an, damit kannst Du nur den IE steuern!
 
und das bezieht sich nur auf den ie?
beim firefox bleibt alles beim alten?
 
genau! wird vom firefox ignoriert!
 
unique23 schrieb:
und das bezieht sich nur auf den ie?
beim firefox bleibt alles beim alten?

Damit überschreibst Du die Werte von vorher, aber da es nur der IE versteht ändert sich im Firefox nichts, nur im IE.;)
 
Anstatt das aber über irgend welche Hacks zu lösen, die möglicherweise irgendwann nicht mehr funktionieren oder auch von anderen Browser (dann falsch) interpretiert werden, sollte man lieber ein extra css für den IE anlegen und das ganze über Conditional Comments einbinden.

Matt
 
danke für die tipps,
aber leider greifen die hacks nicht. wo muss ich den hack reinschreiben? irgendwo im css file?

ich will doch nur ein div auf die restliche fläche vergrößern, damit ich die farbe belegen kann. aber wie geht das?
hat mir jemand noch einen rat?
 
Kann man sich das irgendwo anschauen? Nur anhand des css ist es schwer zu sagen, wo da der Fehler steckt.

Matt
 
hi unique,

dein problem ist der box-model-bug vom ie. das bedeutet, dass der ie die werte von margin, padding und border einfach falsch im bezug zur box-groesse berechnet. die beste cross-browser-kompatible-lösung ist es, sofern diese werte zum einsatz kommen, zwei boxen in einander zu verschachteln, womit das problem gefixt ist, die problematischen wert werden dabei ausschließlich in der inneren box gesetzt. css-hacks sind viel zu aufwendig und entsprechen nicht der w3c conformance. conditional comments entsprechen ebenfalls nicht der w3c conformance.
bei dieser konstruktionsmethode ist es dann völlig egal welches box-model zum einsatz kommt, das layout sitzt immer pixelgenau. selbst die xml-deklaration, die den ie in den quirks-modus zwingt kann dem nichts mehr anhaben.
gibt man der inneren box eine klasse abstand, läßt sich das spaceing sogar zentral mit einem einzigen wert kontrollieren.

grüsse naomi

nachtrag: alte opera-versionen verwenden übrigens ebenfalls das falsche box-model, falls man die lösung von matt nehmen würde, dem ie ein eigenes css zu spendieren, müßte dies für ältere opera-versionen ebenfalls geschehen.
der aufwand mehrere stylesheets zu erstellen oder alternativ für unzählige browser unter diversen plattformen jeweils eigene css-hacks einzubauen ist einfach viel zu aufwändig.
 
Zuletzt bearbeitet:
hallo naomi_watts,
vielen dank für deine antwort zu diesem thema. das hat mich wirklich seehr gefreut und auch neugierig gemacht. das ist ja ein traum pixelgenau zu positionieren. :)
kannst du vielleicht ein kleines beispiel geben als erklärung? ich denke dann wird es 100%ig klar. hab nämlich nicht alles genau vestanden.
wie wird das umgesetzt mit den zwei boxen ineinander? zwei divs?
und wie werden diese dann positioniert? apsolute? relative?
habe ich es richtigverstanden, dass man nach der verschachtelung nur werte für die innnere box angibt? und die äußere wird dann quasi nicht berücksichtigt im css?

wäre echt nett, wenn du mir da noch weiter helfen könntest.
 
hi unique,

hier die antworten.

unique23 schrieb:
wie wird das umgesetzt mit den zwei boxen ineinander? zwei divs?

zwei ineinanderverschachtelte divs. die innere box ist aber nur nötig, wenn einer der problematischen werte margin, padding und border zum einsatz kommen.

unique23 schrieb:
und wie werden diese dann positioniert? apsolute? relative?

grundsätzlich wird absolut positioniert. die technik läßt sich aber auch innerhalb eines liquid-designs anwenden.

unique23 schrieb:
habe ich es richtigverstanden, dass man nach der verschachtelung nur werte für die innnere box angibt? und die äußere wird dann quasi nicht berücksichtigt im css?

die äußere box bekommt positionswerte (top, left) sowie die breite und gegebenfalls die höhe. die innere box bekommt die problematischen werte margin, padding und border.

grüsse naomi
 
Zurück
Oben Unten