Render-Fehler im Firefox?

[Bastian Schnitzler]

Hallo!
Unter unten genannter URL wird eine Seite mit einem Bild von einem Fernseher aufgerufen. Dieses Bild ist absolut positioniert in einem relativ positionierten div. Wenn ich nun im Firefox die Seite lade erscheinen oben ueber dem Logo zwei weisse Leisten und unter dem Fernseherbild ist der Rest der Seite weiss; wenn ich nun das Browserfenster mit der Maus verlasse, erscheint an diesen stellen wieder die eigentlich Hintergrundfarbe, ein Grau.
In Opera und Konqueror treten die weissen Streifen jedoch nicht auf.
Tritt das Problem bei euch im Firefox auch auf; wenn ja, woran kann das liegen? Welcher Browser hat Recht mit der Darstellung?
Achja, wo wir schonmal dabei sind, warum zeigen Opera und Konqueror den weissen Text "A channel on karate and martial arts" abgeschnitten an der Oberleiste des Viewports an? Bzw. warum zeigt mein Firefox mir dies nicht an?
Das Headerdiv bekommt erst einen margin-top von 25px (in diesem div befindet sich der Paragraph mit der Schrift) und dann bekommt eben jener Paragraph ein margin-top von -35px verpasst. Warum ist der Text nun im Firefox nicht um 10px abgeschnitten?

Gruss,
Bastian

[Der Martin]

Hi,

Unter unten genannter URL [http://video.airmack.de/comments.php] wird eine Seite mit einem Bild von einem Fernseher aufgerufen. Dieses Bild ist absolut positioniert in einem relativ positionierten div. Wenn ich nun im Firefox die Seite lade erscheinen oben ueber dem Logo zwei weisse Leisten und unter dem Fernseherbild ist der Rest der Seite weiss; wenn ich nun das Browserfenster mit der Maus verlasse, erscheint an diesen stellen wieder die eigentlich Hintergrundfarbe, ein Grau.

ich habe leider gerade keinen Firefox zur Hand - aber das beschriebene Verhalten klingt für mich *sehr* nach einem Bug. Zumal ich auf dem Element oder dem darin enthaltenen Link in deinem Stylesheet auch keinen Hover-Effekt finde.

In Opera und Konqueror treten die weissen Streifen jedoch nicht auf.

Im IE auch nicht.

Achja, wo wir schonmal dabei sind, warum zeigen Opera und Konqueror den weissen Text "A channel on karate and martial arts" abgeschnitten an der Oberleiste des Viewports an? Bzw. warum zeigt mein Firefox mir dies nicht an?

Das irritiert mich auch etwas; aber da haben die Browser wohl unterschiedliche Auffassungen über die "Normallage" dieses Absatzes. Den nimmst du ja mit float:right aus dem regulären Elementfluss heraus; Opera würde ihn dann oben rechts im Browserfenster plazieren, andere Browser unterhalb des Logos am rechten Rand. Mit dem negativen margin-top ziehst du das Element dann von dort aus nach oben.
Ich würde ganz einfach die Reihenfolge ändern (erst den Absatz mit float:right, dann das Logo) und auf das negative margin-top verzichten.

Übrigens fällt mir noch etwas anderes auf. Ich habe deine Beschreibung beim ersten Durchlesen nicht richtig verstanden und deshalb auf das große Bild im Content-Bereich geachtet. Warum bekommen Opera und IE hier eigentlich zwei unterschiedliche Bilder ausgeliefert, obwohl gar keine Alphatransparenz verwendet wird?

So long,
 Martin

[josh]

Hallo,

Warum bekommen Opera und IE hier eigentlich zwei unterschiedliche Bilder ausgeliefert, obwohl gar keine Alphatransparenz verwendet wird?

Die Bilder werden bei jedem Laden der Seite (PHP) zufällig ausgewählt, glaube ich. Hat nichts mit den Browsern zu tun.

Gruß

[Bastian Schnitzler]

Hi!

Ich würde ganz einfach die Reihenfolge ändern (erst den Absatz mit float:right, dann das Logo) und auf das negative margin-top verzichten.

Danke, das hilft, aber ich hab mal gehoert, dass das fuer die Suchmaschinenoptimierung dann nicht so gut sein soll. Muss da nicht immer erst Logo, bzw. Titel und dann Beschreibung folgen, damit Google das ganze gut listet? Naja, die Suchmaschinenplatzierung ist mir bei der Seite eh egal :D

Übrigens fällt mir noch etwas anderes auf. Ich habe deine Beschreibung beim ersten Durchlesen nicht richtig verstanden und deshalb auf das große Bild im Content-Bereich geachtet. Warum bekommen Opera und IE hier eigentlich zwei unterschiedliche Bilder ausgeliefert, obwohl gar keine Alphatransparenz verwendet wird?

Ja, das ist randomisiert, um ein bisschen Abwechslung zu haben. Sieht fast so aus, als ob ich mir auch mal den neuen Firefox kompilieren muesste :/

Gruesse,
Bastian

[josh]

Hallo,

Wenn ich nun im Firefox die Seite lade erscheinen oben ueber dem Logo zwei weisse Leisten und unter dem Fernseherbild ist der Rest der Seite weiss; wenn ich nun das Browserfenster mit der Maus verlasse, erscheint an diesen stellen wieder die eigentlich Hintergrundfarbe, ein Grau.
In Opera und Konqueror treten die weissen Streifen jedoch nicht auf.
Tritt das Problem bei euch im Firefox auch auf; wenn ja, woran kann das liegen? Welcher Browser hat Recht mit der Darstellung?

Richtig ist, dass alles einheitlich grau ist:
Works for me/Firefox 3.0

Das Headerdiv bekommt erst einen margin-top von 25px (in diesem div befindet sich der Paragraph mit der Schrift) und dann bekommt eben jener Paragraph ein margin-top von -35px verpasst. Warum ist der Text nun im Firefox nicht um 10px abgeschnitten?

Ohne den negativen Margin fängt dieser Text genau unterhalb des Bildes links an (was auch richtig ist), nur dass der Text rechts liegt. Entweder schreibst du den Text im Quellcode _vor_ das Logo oder du musst den Margin entsprechend anpassen. Stattdessen kannst du auch Positionierung verwenden.

Noch was: Bei einigen der "Fernsehbildern" benutzt du left:...px. Das ergibt aber eine unschöne horizontale Scrollleiste. Du solltest das mit der Positionierung der Fernsehbilder noch einmal überdenken.

Gruß

[Bastian Schnitzler]

Hi!

Ohne den negativen Margin fängt dieser Text genau unterhalb des Bildes links an (was auch richtig ist), nur dass der Text rechts liegt. Entweder schreibst du den Text im Quellcode _vor_ das Logo oder du musst den Margin entsprechend anpassen. Stattdessen kannst du auch Positionierung verwenden.

Stimmt, warum bin ich darauf nicht selbst gekommen (das kommt davon, wenn man sich zu sehr in floats verliebt). Position absolute sollte es tun. Danke!

Noch was: Bei einigen der "Fernsehbildern" benutzt du left:...px. Das ergibt aber eine unschöne horizontale Scrollleiste. Du solltest das mit der Positionierung der Fernsehbilder noch einmal überdenken.

Das verstehe ich nicht ganz, warum erzeugt das Scrollleisten? Oder meinst du, dass einige Bilder fuer eine Aufloesung von 800x600 unguenstig platziert sind?

Gruss,
Bastian

[josh]

Hallo,

Noch was: Bei einigen der "Fernsehbildern" benutzt du left:...px. Das ergibt aber eine unschöne horizontale Scrollleiste. Du solltest das mit der Positionierung der Fernsehbilder noch einmal überdenken.

Das verstehe ich nicht ganz, warum erzeugt das Scrollleisten? Oder meinst du, dass einige Bilder fuer eine Aufloesung von 800x600 unguenstig platziert sind?

Nein. Ein Blockelement ohne explizite Breitenangabe erhält immer die Breite des nutzbaren Bereiches des Elternelements. Wenn du das Element nun durch Positionierung nach rechts verschiebst, hat es immer noch die gleiche Größe und geht in diesem Fall über die Breite des Viewports hinaus. Daher blendet der Browser die Scrollleiste ein.

Abhilfe wäre in diesem Fall, margin-left zu verwenden (du tust dies auch bei einem der verschiedenen Bilder).

Gruß