zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header verrutscht in Opera und Safari

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2006, 18:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2006
Beiträge: 14
Meccs befindet sich auf einem aufstrebenden Ast
Standard Header verrutscht um 1px in Opera und Safari

Hallo,

steige gerade auf CSS um. Meine Seite (noch in Bearbeitung) kann man auf http://www.eldia.de/test.html sehen. Im IE und Firefox wird alles richtig dargestellt.
Ich habe jetzt folgendes Problem mit Opera und Safari:

Der Header, welcher als div eingefügt ist und ein Hintergrundbild hat (Wolken) verrutscht manchmal einen Pixel nach links. Das heisst, man sieht, dass der Header den linken vertikalen weissen Streifen überlappt.
Das ist jedoch nicht immer so. Man kann es oft nur sehen wenn man das Browserfenster kleiner macht, d.h. die Breite des Browserfensters ändert. Wenn man dabei ganz langsam, Schritt für Schritt das Browserfenster streckt oder verkleinert sieht man, daß der Header mal den Streifen überlappt und mal auch nicht.

Ich hab schon alle Breiten etc. überprüft. Nix zu machen. Hat jemand nen Tip?

Danke

P.S. hier nochmal das Problem als ---> Bild

Geändert von Meccs (03.08.2006 um 19:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2006, 18:55
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Horizontale Zentrierungen von Blockelementen einerseits und Body-Hintergrundbildern andererseits sind nicht in Einklang zu bringen. Da mußt Du eine andere Lösung finden, und zwar 100% Höhe (siehe FAQ Punkt 4, "FooterStickAlt" verdeutlicht das Prinzip am Besten).

EDIT: Noch mein Standard-Satz: Wirf das div #nav_top raus und gib ul die ID.

Geändert von heiko_rs (03.08.2006 um 19:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2006, 19:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2006
Beiträge: 14
Meccs befindet sich auf einem aufstrebenden Ast
Standard

Hmm, danke erstmal für die Antwort. Hab mir das jetzt mal angeschaut, denke aber nicht dass das mein Problem ist. Kann das sein?
Schau dir mal das Bild an was ich in mein Posting hinzugefügt habe.

Das passiert NUR in Opera und Safari wenn man das Browserfenster breiter oder schmäler zieht. Es verrutscht dann ab und zu um diesen 1px nach links wenn man es langsam zieht. Manchmal ist es auch im Vollbild so, manchmal nicht.
Im IE und Firefox bleibts stehen.
Wenn ich vom Bild ausgehend jetzt das Browserfenster vorsichtig etwas breiter machen würde, stimmts wieder. Nächster Schritt breiter, stimmt nicht mehr (so wie im Bild). Wieder stück breiter: Stimmt wieder etc etc.

Geändert von Meccs (03.08.2006 um 19:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2006, 19:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Schon klar, ich hatte genau dieses Problem im Opera 9 gesehen. Aber Dein Container ist 740px breit, der Header ebenfalls, und dessen Hintergrundbild auch, also kann sich nicht der Header verschieben, sondern allenfalls der ganze Container. Und das ist genau das genannte Problem bzgl. verschiedenartiger Zentrierungen. Dieses tritt nicht in IE & FX auf, aber z.B. sehr wohl in Opera.

Dennoch schaue ich mir Dein Markup & CSS nochmal genau an und poste dann nochmal.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2006, 19:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Es ist genau wie ich gesagt hatte. Und daß sich ausschließlich der Header verschiebt, scheint nur so; tatsächlich verschiebt sich der ganze Container, was allerdings nicht auffällt, da Du keinerlei Hintergrundfarben verwendest (der schwarze Hintergrund des gesamten Contents wird ausschließlich durch das Body-Hintergrundbild erzeugt). Nur beim Header fällt die Verschiebung auf, da dieser als einziger einen Hintergrund hat (das Foto), der den Body-Hintergrund bei einer Container-Verschiebung überdeckt.

Abhilfe wie gesagt: 100% Höhe des Containers. Dafür bekommen html und body height: 100%; und #container min-height: 100%; (sowie height: 100%; für IE bis inkl. 6).

Geändert von heiko_rs (03.08.2006 um 20:04 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2006, 20:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2006
Beiträge: 14
Meccs befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
Es ist genau wie ich gesagt hatte. Und daß sich ausschließlich der Header verschiebt, scheint nur so; tatsächlich verschiebt sich der ganze Container, was allerdings nicht auffällt, da Du keinerlei Hintergrundfarben verwendest (der schwarze Hintergrund des gesamten Contents wird ausschließlich durch das Body-Hintergrundbild erzeugt). Nur beim Header fällt die Verschiebung auf, da dieser als einziger einen Hintergrund hat (das Foto), der den Body-Hintergrund bei Container-Verschiebung überdeckt.
Ja genau nur der Container, hatte ich vorhin falsch geschrieben. Gibts keine Lösung das auch im Opera und Safari "fest" zu bekommen, ausser die Streifen aus dem body Hintergrund rauszunehmen? Scheint ja echt nur ein Opera/Safari Problem zu sein.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.08.2006, 20:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Da gibt's keine Möglichkeit. Gib Streifen und Schatten einfach dem Container, der dann entsprechend breiter und 100% hoch wird. Der Body braucht dann nur noch eine einfache Farbe als Hintergrund (keine Grafik mehr).
Mit Zitat antworten
  #8 (permalink)  
Alt 03.08.2006, 20:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2006
Beiträge: 14
Meccs befindet sich auf einem aufstrebenden Ast
Standard

Danke nochmal für deine Hilfe
Werd jetzt den Hintergrund in den Container einbinden. Muss aber nochmal die FAQ's anschauen, dass der Container auch immer 100% der Browserhöhe ausmacht. So richtig hab ich das (als Anfänger) nämlich noch nicht hinbekommen. Scheint ja das CSS-Neuling Problem schlechthin zu sein. 100% Höhe des Containers der Floats beinhaltet
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2006, 21:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wie gesagt, ganz einfach:

Code:
html, body {
height: 100%;
}

#container {
min-height: 100%;
}

* html #container {
height: 100%; /* nur für IE 5 und 6 */
}
Mit Floats gibt's kein Problem, solange Du immer clearst. Und ein clearender Footer ganz unten in #container ist auch immer eine gute Sache.

Übrigens kannst Du Dein Markup total "verschlanken": Allein im oberen Bereich kannst Du die divs #intro, #header und #nav_top rausschmeißen. <ul> bekommt dann eine ID sowie die Header-Grafik (den Platz dafür schafft padding-top: 230px; ). Oder Du ersetzt #header durch eine <h1> (mit dem Text, der auf der Grafik steht) und setzt Image-Replacement ein: http://meiert.com/de/publications/ar.../#gilder-levin

Geändert von heiko_rs (03.08.2006 um 21:07 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2006, 22:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2006
Beiträge: 14
Meccs befindet sich auf einem aufstrebenden Ast
Standard

Super, danke nochmal für die umfangreiche Hilfe! Bin gerade dabei die ganze Seite noch mal zu überarbeiten. Was ich dabei gemerkt habe: Der IE mag kein Margin oder? z.B man hat ein div "content" hat und darin ein div "main" was nach links gefloated ist. Wenn ich nun main ausrichten will und nehme Margin statt Padding, dann haut es das Layout im IE auseinander weil die Abstände ganz anders sind. Wenn ich Padding nehme stimmt der IE mit den anderen Browsern überein. Sehr komisch das

EDIT: Ach und noch ne Frage: Wieso ist es besser den div durch ul zu ersetzen? Kommt doch aufs selbe raus dann nicht?

Geändert von Meccs (03.08.2006 um 23:15 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild zentrieren JuKo CSS 4 21.03.2018 01:35
Header im Opera verschoben!? hajo808 CSS 3 25.10.2010 16:57
fixed header problem im FF und Opera klingklngeling CSS 2 30.05.2009 14:25
header verrutscht... weblearner CSS 6 03.12.2008 20:34
Opera: Last.fm-Widget überdeckt Header und Footer DieterWelzel CSS 0 25.02.2008 03:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:13 Uhr.