|
|||
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) |
Sponsored Links |
Sponsored Links |
|
|||
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) |
|
||||
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. |
|
||||
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) |
|
|||
Zitat:
|
|
||||
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).
|
|
|||
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 |
|
||||
Wie gesagt, ganz einfach:
Code:
html, body { height: 100%; } #container { min-height: 100%; } * html #container { height: 100%; /* nur für IE 5 und 6 */ } Ü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) |
Sponsored Links |
|
|||
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) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |