Hi!
Wie es scheint, interpretiert der IE6 die relativen Positionsangaben der Boxen in der rechten Spalte auf seine eigene Weise.
Abhilfe schafft da eine "Wert-Korrektur" für die rechte Positionsangabe, die z.B. mit der
!important-Regel vorgenommen werden könnte:
Code:
/* Formatierung Videowindow */
img#picvideo {
position: relative;
top: 100px;
right: 10px !important; /* Für moderne Browser */
right: -10px; /* Für IE6 */
height: 120px;
width: 140px;
z-index: 10;
}
div#videowindow {
position: relative;
top: -50px;
right: 30px !important; /* Für moderne Browser */
right: 10px; /* Für IE6 */
height: 191px;
width: 182px;
background-image: url(pic/videofenster.gif);
z-index: 20;
}
/* Formatierung Bildwindow */
img#picpicture {
position: relative;
top: -0px;
right: 10px !important; /* Für moderne Browser */
right: -10px; /* Für IE6 */
height: 120px;
width: 140px;
z-index: 10;
}
div#picturewindow {
position: relative;
top: -150px;
right: 30px !important; /* Für moderne Browser */
right: 10px; /* Für IE6 */
height: 191px;
width: 182px;
background-image: url(pic/Bildfenster.gif);
z-index: 20;
}
Den nächsten Aspekt, den du beachten musst, ist der Umstand, dass durch die XML-Deklaration vor der Doctype-Angabe der IE6 in den Quirksmodus versetzt wird, d.h. er verhält sich nun wie die 5er-Baureihe und unterstützt das
Boxmodell nicht mehr.
Die Folge: alle Boxen, die neben der Breitenangabe eine
padding- und/oder
border-Eigenschaft erhalten, "fallen" im IE6 zusammen, da er die genannten Eigenschaften nicht mehr zur Breitenangabe hinzuzählt, was die "tatsächliche" Boxbreite ergibt.
Konkret heißt das für dich, dass auch hier ein Workaround erforderlich ist, damit er die beiden äußeren Spalten (leftCol, rightCol) und die Navigation in den jeweiligen "Boxbreiten" (width + border) darstellt. Eine Möglichkeit wäre hier der
Tantek-Hack, in dem für die älteren IE-Versionen die Summe aus "width + border-left" bzw. "width + border-right" als Breitenangabe bestimmt wird.
Da jetzt aber schon in diversen Selektoren Korrekturen für den IE vorgenommen werden müssen, empfiehlt es sich, auf meine beiden empfohlenen Techniken (!important-Regel, Tantek-Hack) zu verzichten, und alle notwendigen Fehlerkorrekturen global in einem Stylesheet vorzunehmen, das nur für den IE <7 bestimmt ist.
Wie das geht? Mit Hilfe des
Conditional Comments lässt sich in das Dokument ein Stylesheet laden, das nur vom IE (Win) "gelesen" wird.
Praktisch sieht's dann so aus, dass in der "basic.css" nichts verändert wird, alles bleibt so, wie es derzeitig ist. Nun legst du dir eine neue CSS-Datei an, nennst sie z.B. "basic_ie6.css" und notierst in diesem Stylesheet nur die Selektoren mit den relevanten CSS-Eigenschaften, in denen eine "Fehlerkorrektur" vorgenommen werden muss. Alles übrige aus der "basic.css" brauch hier nicht wiederholt werden.
Da der "CC" im HTML-Quelltext nach dem
link-Element notiert wird, überschreibt der IE beim Parsen der "basic_ie6.css" die zuvor eingelesenen Eigenschaftswerte aus der "basic.css".
Soviel erstmal von meiner Seite zu den CSS-Fragen.
Zum invaliden Flash, das du mit dem
embed-Element in die Seite einbettest, empfehle ich dir die beiden Themen:
- embed und der Validator
- swf-File barrierefrei, valide und browserübergreifend einbauen