XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hilfe: IE zerschießt Layout (http://xhtmlforum.de/showthread.php?t=40159)

Paulinche 01.06.2006 08:25

Hilfe: IE zerschießt Layout
 
Liste der Anhänge anzeigen (Anzahl: 1)
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!

Tigereye 01.06.2006 16:12

Der einzige Tipp, der mir auf Anhieb einfällt: Lass den Iframe weg! Die machen ständig Probleme, nicht nur im IE. Wenn du einen Teil der Seite auslagern willst, machst du das am besten serverseitig mit PHP oder SSI.

Paulinche 02.06.2006 11:33

Danke!

Ich glaube das liegt am holygrail-spalten-layout. Wer noch mal schauen und dann posten.

Paulinche 02.06.2006 14:15

So, Problem gelöst.

Hier der Lösungsansatz:

http://www.cssplay.co.uk/layouts/3cols2.html

Einfach ausprobieren. Der Aliasapart-Ansatz hat bei mir nicht funktioniert.


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020