wie positioniert man sicher mit css im ie?

  1. unique23

    unique23 Thread StarterMacUser Mitglied

    Mitglied seit:
    03.03.2004
    Beiträge:
    754
    Zustimmungen:
    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;
    }
    
    
    
    
     
    unique23, 07.06.2006
  2. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    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!
     
    ThaHammer, 07.06.2006
  3. unique23

    unique23 Thread StarterMacUser Mitglied

    Mitglied seit:
    03.03.2004
    Beiträge:
    754
    Zustimmungen:
    2
    und das bezieht sich nur auf den ie?
    beim firefox bleibt alles beim alten?
     
    unique23, 07.06.2006
  4. _julius

    _juliusMacUser Mitglied

    Mitglied seit:
    11.10.2004
    Beiträge:
    722
    Zustimmungen:
    0
    genau! wird vom firefox ignoriert!
     
    _julius, 07.06.2006
  5. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Damit überschreibst Du die Werte von vorher, aber da es nur der IE versteht ändert sich im Firefox nichts, nur im IE.;)
     
    ThaHammer, 08.06.2006
  6. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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
     
    msslovi0, 08.06.2006
  7. Difool

    Difool Frontend Admin

    Mitglied seit:
    18.03.2004
    Beiträge:
    8.291
    Medien:
    31
    Zustimmungen:
    1.202
    z.B. > CSS/Browserweichen
     
    Difool, 08.06.2006
  8. unique23

    unique23 Thread StarterMacUser Mitglied

    Mitglied seit:
    03.03.2004
    Beiträge:
    754
    Zustimmungen:
    2
    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?
     
    unique23, 09.06.2006
  9. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Kann man sich das irgendwo anschauen? Nur anhand des css ist es schwer zu sagen, wo da der Fehler steckt.

    Matt
     
    msslovi0, 09.06.2006
  10. naomi_watts

    naomi_wattsMacUser Mitglied

    Mitglied seit:
    11.02.2006
    Beiträge:
    111
    Zustimmungen:
    0
    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.
     
    naomi_watts, 20.06.2006
Die Seite wird geladen...
Ähnliche Themen - positioniert sicher css
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    306
  2. hello
    Antworten:
    1
    Aufrufe:
    238
  3. Hoooray
    Antworten:
    2
    Aufrufe:
    328
    Hoooray
    21.07.2015
  4. Angeline!
    Antworten:
    11
    Aufrufe:
    1.055
    MacEnroe
    17.04.2009
  5. Penalty
    Antworten:
    1
    Aufrufe:
    523
    sir_flow
    14.12.2007