• Hallo zusammen,

    ich habe ein Web-Layout mit Header, Mittelteil (Content) und Footer (Sticky-Footer) entwickelt.
    Leider ist das Layout komplexer ausgefallen, wie ich es wollte. Das Problem ist, dass das Layout springt und zwar nur beim IE6 (IE5.5, IE7, Firefox2 ist ok).
    Im Header habe ich zwei Menüs mit Text-Links, ein vertikales: <li><a href="...">Blabla</a></li> und ein horizontales: <a href="...">Blabla</a> | <a href="...">Blabla</a> | ...
    Im CSS ist auch a:hover { background:...; } definiert. Fahre ich mit der Maus über einen der vertikalen Links, springt der Content-Bereich um 35px nach unten und bleibt dort, bis ich über einen horizontalen Link im Header fahre. Dann springt der Content-Bereich wieder um die 35 Pixel nach oben und bleibt dort wieder.

    Irgendwie hänge ich bei diesem Problem, vielleicht kann mir jemand einen Tip geben, woran das liegen könnte, oder wie ich zumindest die Fehlerursache einkreisen könnte.

    Danke

    MfG

  • overflow:hidden ein wenig geholfen, aber noch nicht vollständig, height:1% hat gar nichts gebracht.
    Wenn das Layout sich "eingerenkt" hat, bleibt es jetzt stabil, bis man die horizontale Fenstergrösse ändert, ansonsten hat sich der Effekt auf den halben Versatz reduziert.

    Ich verstehe jedoch nicht, warum overflow:hidden hier hilft. Bricht der IE6 intern bei hover um (es wird ja keine Schrift oder so geändert) ?
    Warum tritt in der horizontalen Leiste genau der umgekehrte Effekt auf (der Versatz wird weggenommen) ?

    MfG

  • also ich hab den fehler nicht erkannt, muss ich gestehen...
    ich habe nur festgestellt, dass es sich dabei um ein div handelt, was ein floatendes div umschliesstund da hatte ich schon ein paar mal eine ähnliche problematik...
    also wenn du dir ne leere datei machst dort nen wrapper reinhaust, in den wrapper floatende elemente mit ner bestimmten höhe bzw inhalt und dem wrapper nen border gibst, kannste dir mal ansehen was passiert, wenn du overflow:hidden weg lässt und wenn du es hinzufügst.

    im ietester hatte ich grad keine probleme mehr.
    aber deine seite ist ein schönes beispiel dafür, was alles trotz validem code aus den fugen geraten kann.
    kann mich mit deiner sache morgen gerne noch etwas beschäftigen (ne std oder so hab ich ggf noch freie zeit)
    aber dafür müsstest du mir die seite also nur die eine verlinkte mit allen elementen offline zur verfügung stellen. machste einfach ma ne zipfile.

    denn das interessiert mich doch schon, was da los is, hab sowas noch nie gesehen. zumindest hab ich nirgendwo da nen padding oder margin erkannt, was reinkommt.

    nur so als tipp: verzichte auf inline-styles, mach alles über id und klassen, dann isses einfacher zu warten, übersichtlicher und kompakter.
    und: es is sauber getrennt also code und layout :)

    ich geh nu pennen gut nacht

  • 1. Kein Problem vom IE auch anderer Browser zippen paar Millimeter runter, was auch nicht okay ist

    2. Valide? Klasse noch nie so einen unübersichtlichen CSS Code gesehen, 100 Divs reingehauen ohne Bezug.... (Häste mal lieber Tabellendesign gemacht dann wäre das nicht passiert;))

    3. Sieht mir das nach einem ACTIVE Problem aus

  • Ich Teste das Layout z.Zt. nur mit IE-Tester IE5.5 -IE7 und Firefox2.

    1. das Layout ist tatsächlich nicht 100% pixelgenau in verschiedenen Browsern, aber dank einiger CSS-Hacks fast zu 100%. Was ich aber konkret meine ist, daß der Content-Bereich im IE6 (und zwar nur im IE6) um etliche Pixel nach unten und oben springt, wenn man über die Links im Header fährt.

    2. valide schon, unübersichtlicher CSS ja, ich muss zugeben, ich habs auch ein wenig vermurkst und liesse sich vermutlich besser optimieren, sowohl technisch als auch von der Übersichtlichkeit.

    3. Was heisst ACTIVE ?

    Zum Seitenaufbau:
    An die Inline-Styles werde ich noch rangehen, hatte bereits vieles in css-Klassen gepackt, ansonsten Punkt 2.

    Damits nicht ganz so wüst aussieht hab mal ne test.zip gemacht, aus der ziemlich alles ohne Relevanz zu dem Problem rausgestrichen ist.

    Übrigens hab ich auch das JS entfernt, und das Layout mit variabler Breite gewählt, da das Problem bei fixer Breite mit dem overflow:hidden in .mendiv sonst nicht zu sehen ist. In test.htm ist das overflow:hidden als Inline-Style eingefügt, so findet und editiert man schneller diese Problemstelle.


    MfG

  • Nur weil eine "Maschine" keine Syntaxfehler findet und deswegen als Valide ausspuckt heißt das noch lang nicht das es sauber ist

    Bei mir springt es im Firefox 3.6.12, also es ist mehr ein zuggen

    Naja ihr macht das schon:)

  • threadi erklär mir mal bitte was des bringt, ich kann dem nich so wirklich folgen., (mag am bier liegen :) )

    Dient zur Herstellung des "normalen" Verhaltens bei Blockelementen. Siehe:

    Zitat

    Since IE/Win will misbehave in this manner, when a dimension is needed to fix a float bug, a very small height, such as {height: 1%}, can be applied to the float container, and IE/Win will just make the box taller anyway.


    http://www.communitymx.com/content/articl…age=2&cid=c37E0

    Hilft ungemein bei den meisten Menü-Problemen im IE6. Aber eben nur bei den meisten.

    3. Was heisst ACTIVE ?

    Ich tippe mal auf die Pseudoklasse, vom IE6 nur für Links interpretiert:

    Code
    a:active

    Hab btw. keinen IE6 hier, kann ihn nicht mal wirklich installieren, daher kann ich es mir auch nicht wirklich anschauen :|

  • Hallo,

    vielen Dank für die Hilfe, bzw. Denkanstösse.

    ich konnte den Fehler mittlerweile einkreisen und auch (will ich hoffen) beheben.
    Zunächst tritt das Problem nur im ie6 auf bei der Klasse
    .hlink a:hover { background:...; }
    Wird in der Pseudoklasse :hover die Background-Farbe nicht gesetzt, funktionierts,
    ich will aber die Links beim drüberfahren hervorheben, als kann ich die Klasse nicht einfach rausnehmen.
    gebe ich dem .hlink-Container einen padding-bottom von mindestens 22px, springt das Layout nicht mehr. Das scheint die anderen Browser nicht zu beeinflussen.
    Da ich aber die gleiche Klasse auch in der Fuss-Leiste verwende, habe ich zur Kompensation die Klasse .botlnk in der Fussleiste hinzugefügt, wo der padding wieder auf 0 gesetzt wird:

    .hlink, .hlink span,
    .hlink a { font-size:11px; height:14px; line-height:14px; }
    .hlink { padding-bottom:22px; } /* ie6 bug wegen .hlink a:hover */
    .hlink a:hover { background:#0ff; }
    .botlnk { padding-bottom:0px; } /* wegen ie6-Bug bei .hlink a:hover */

    So scheint es im ie5.5, ie6, im ie7 und firefox2 zu funktionieren.

    Ich denke das Problem ist damit gelöst, wenn ich den "Bug" auch nicht wirklich versteh.

    MfG