ich bräuchte Hilfe, da ich nicht weiss, warum der IE 7 und Opera 9.1 mein Layout fehlerhaft darstellen. Das zeigen mir nämlich die Screenshots von Browsershot.org - Link
Die Testseite findet Ihr hier - ich bin aber noch nicht ganz fertig, die meisten Dinge stehen bereits.
Hintergrund zum Problem:
Ich sitze an einem Redesign der Website eines politischen Jugendverbandes und will endlich von Tabellen & Co. auf "vernünftiges" xhtml umstellen. Das klappt auch soweit ganz gut. Es ist ein Drei-Spalten-Layout mit Header, Menue links, Content Mitte und Infoleiste rechts sowie Footer am Ende.
Mit IE 6, FF 1.5 und Opera 8.0 hatte ich das Layout geprüft und es klappt einwandfrei. Aber laut den o.g. Screens haben IE 7 und Opera 9.1 Probleme.
Opera 9.1: https://browsershots.org/screenshots/fa ... 1e9fab436/
IE 7: https://browsershots.org/screenshots/a2 ... 328a865dd/
Wie Ihr sehen könnt, rutscht der Content in der mittleren Spalte nach unten und startet erst, wenn der rechte Container beendet ist.
Der rechte Container wird aufgerufen per
Code: Alles auswählen
<div id="sidebar" class="clearfix">Code: Alles auswählen
<div id="contentarea" class="clearfix">Code: Alles auswählen
#sidebar
{
float: right;
width: 200px;
margin: 0 0 0 10px;
background: url(../images/bg_container03.gif) transparent repeat-y right top;
font: 0.85em Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: transparent ;
color: #000;
}
#contentarea
{
font: 1.0em Verdana, Arial, sans-serif;
margin: 15px 185px 0 185px;
padding: 0 5px 0 0;
}
/* Cleafix-Hack */
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix
{
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
/* End hide from IE-mac */
Kann mir jemand helfen, wo das Problem lokalisiert sein könnte und was ich dagegen tun kann?
Danke im Voraus
Frank-Andre
