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!