Tabellenlayout mit Divs

Status
Nicht offen für weitere Antworten.
So ich glaube ich muss mich doch noch ein letztes Mal melden bevor ich das Thema komplett abschließen kann ^^

Das Ergebnis sieht jetzt so aus:
http://senshi.kilu3.de/gb/index.html

Best seen in Firefox, aber in IE7 und Opera gehts genauso gut, der für den ic hdas gemacht hab ist auch zufrieden.
Jetzt habe ich noch ein Problem, darauf hat er mich aufmerksam gemacht (konnte ich nicht mehr testen, IE6 und IE7 schafft man leider nicht auf einem Rechner).
Im IE6 sieht das Ganze jetzt so aus (vielleicht gibt es ja jemanden der IE6 noch installiert hat): http://img517.imageshack.us/my.php?image=fehlersa9.png

Leider habe ich keine Ahnung woran das liegen könnte, zumal mir nicht bewusst ist, dass ich CSS-Befehle verwendet habe die der IE6 nicht darstellen kann. Und eine Chance das zu testen und auf alle Browser anzupassen habe ich auch nicht, da ich den IE6 wie gesagt nicht mehr installiert habe.

Kann mir da jemand noch ein letztes Mal bei helfen? :confused:

Dann noch eine Frage zum Schluss.
Und zwar war meine Seite 100% XHTML1.0 und 100% CSS Valide, jetzt hab ich das Flash eingebunden und dann kommt er mir mit etlichen Fehlern. Habe aber keine andere Möglichkeit gefunden Flash einzubinden, immer gab es Fehler, auch wenn ich mir den Code von SelfHTML etc. kopiert hatte. Kann man Flash überhaupt einbinden ohne das die Seite invalide wird?

(P.S.: Wieso müssen Browser die gleichen Standardbefehle nur immer unterschiedlich interpretieren das macht mir irgendwie jedes Mal Kopfzerbrechen -.-' )

// Edit: Achja die CSS Datei findet man hier: http://senshi.kilu3.de/gb/basic.css
 
Hi,

der IE versteht keine Hintergrundfarben für iFrames. Stattdessen zeigt er die Fensterhintergrundfarbe an.

Statt dem iFrame eine Hintergrundfarbe zu geben, kannst Du dem enthaltenen Dokument im Body die gewünschte
Farbe zuweisen.

Zum Thema Flash einbinden findest Du Hilfe bei SelfHTML - das zweite Beispiel mit dem Link sollte interessant für
Dich sein.

Ciao
Quaese
 
@Flash einbinden: Werde ich mir mal anschauen thx :)

@Fehler: Den iframe Hintergrund meinte ich nicht, der ist mir so ziemlich egal, da der eh ausgefüllt wird ;)
Ich meinte das Hineinragen der beiden Fenster rechts in den mittleren iframe, hätte das wohl besser beschreiben müssen.
 
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:

  1. embed und der Validator
  2. swf-File barrierefrei, valide und browserübergreifend einbauen
 
Huh das sind mal echt viele Infos ^^
Das mit dieser CSS Weiche, dass es für unterschiedliche Browser unterschiedliche CSS Files gibt hab ich auch schon mal gesehen, ich denke ich werde es auch so machen.
Danke für diese ausführliche Antwort, hab ich wieder einiges dazu gelernt :)
Ich denke damit sollte ich dann auch jetzt klar kommen :)
 
Status
Nicht offen für weitere Antworten.
Zurück