wie positioniert man sicher mit css im ie?

Diskutiere mit über: wie positioniert man sicher mit css im ie? im Web Page Design Forum

  1. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    Registriert seit:
    03.03.2004
    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;
    }
    
    
    
    
     
  2. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    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!
     
  3. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    Registriert seit:
    03.03.2004
    und das bezieht sich nur auf den ie?
    beim firefox bleibt alles beim alten?
     
  4. _julius

    _julius MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    Registriert seit:
    11.10.2004
    genau! wird vom firefox ignoriert!
     
  5. ThaHammer

    ThaHammer MacUser Mitglied

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

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  7. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    858
    Registriert seit:
    18.03.2004
    z.B. > CSS/Browserweichen
     
  8. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    Registriert seit:
    03.03.2004
    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?
     
  9. msslovi0

    msslovi0 MacUser Mitglied

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

    Matt
     
  10. naomi_watts

    naomi_watts MacUser Mitglied

    Beiträge:
    111
    Zustimmungen:
    0
    Registriert seit:
    11.02.2006
    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: 20.06.2006
Die Seite wird geladen...
Ähnliche Themen - positioniert sicher css Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
CSS: Styling von Abonnieren-Feld Web Page Design 20.08.2014

Diese Seite empfehlen

Benutzerdefinierte Suche