Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 01.06.2006, 08:25
Paulinche Paulinche ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.03.2006
Beiträge: 10
Paulinche befindet sich auf einem aufstrebenden Ast
Standard Hilfe: IE zerschießt Layout

Guten morgen zusammen!

Ich habe wieder einmal ein Problem auf dessen Lösung ich beim besten Willen nicht kommen will.
Ich habe ein dreispaliges Layout, in wessen linker Spalte #left ein Iframe eingefügt ist. Der Iframe hat Höhe 100% des ihn umgebenden Containers (#left).
Im FF bleibt der Frame wo er sein soll, im IE6 "hüpft" der gesammte Container (#left) spontan zentral in die Mitte. Das passiert vorallem, wenn man in der Spalte #right per hover über einen Link fährt.

Mein #left ist wie folgt für den IE in der style.css angegeben:


Code:
/*** IE6 Fix ***/
* html #left {
  left: 178px;           
}
hier die normalen Werte für #left:
Code:
#left {
  position: relative;
  float: left;
  width: 176px;          
  right: 176px;          
  margin-left: -100%;
  height:100%;
  border-right: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  color: #000000;
  background-color:#FFFFFF;
}
hier der wichtigste Teil der style.css:

Code:
body {
  background-color: #eeeeee;
  color: #000000;
  margin: 			0px auto;
  min-width: 550px;      
  height:622px;
  width:1000px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 80%;
  font-style:normal;
}
			
#header {
  color:#EEE;
  background-color:#FFFFFF;	
  min-width: 550px;     
  margin: 			0px auto;
  height:170px;
  width:996px;
  background-image: url(../pics/header/abstrakt.jpg);
  border-right: 2px solid #CCCCCC;
  border-left: 2px solid #CCCCCC;
  }
  

#container100 {  
  color: #000000;
  background-color:#FFFFFF;
  padding-left: 176px;   /* LC width */
  padding-right: 178px;  /* RC width */
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  height:100%;
}

#container .column {
  position: relative;
  float: left;
}
#center {
  position: relative;
  float: left;
  width: 100%;
  height:100%;
  color: #000000;
  background-color:#FFFFFF; 
}

#left {
  position: relative;
  float: left;
  width: 176px;          /* LC width */
  right: 176px;          /* LC width */
  margin-left: -100%;
  height:100%;
  border-right: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  color: #000000;
  background-color:#FFFFFF;
}
#right {
  position: relative;
  float: right;
  width: 176px;          /* RC width */
  margin-right: -178px;  /* RC width */
  border-right: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  height:100%;
  color: #000000;
  background-color:#FFFFFF;
}
/*** IE6 Fix ***/
* html #left {
  left: 178px;           /* RC width */
} 
 * html #right {
  right: 178px;           /* LC width */
} 
#footer {
  clear: both;
  position:relative;
  height:22px;
  width:998px;
  border: 1px solid #CCCCCC;
  color: #000000;
  background-color:#FFFFFF;
  padding-top:			0px;
}
Hier der Link zur Seite


Wenn ich die Seite im IE aktualisiere "hüpft" der Container wieder nach links auf seinen ihm zugeteilten Platz.
Hat jemand eine Erklärung und, noch besser, eine Lösung für dieses Problem?
Leider habe ich noch nicht soviel Erfahrung mit css, deswegen nicht hauen wenns etwas einfaches ist.
Im Anhang findet ihr die style.css

Danke für die Hilfe im Voraus!
Angehängte Dateien
Dateityp: zip style.zip (3,0 KB, 0x aufgerufen)
__________________
WebmasterStart.org - die besten Seiten für Webmaster/Designer übersichtlich in einer Liste
Mit Zitat antworten
Sponsored Links