Klaus F.: "sprung" bei internet explorer in verbinung mit :hover

hallo in die runde,

habe ein kleines problem, dass das aussehen, besser gesagt die funktion meiner site etwas seltsam unter internet explorer 6 macht.

es gibt ein menü, in dem die links per css und :hover die farbe und hintergrund ändern. das komische ist, dass beim ersten mal drüberfahren, dieses menü einen satz nach links macht, bei allen weiteren versuchen aber nicht (erst nachdem ich wieder die seite aufrufe).

es passiert eben nur im ie6, in allen anderen browsern funktionierts prima.

hat das schon mal jemand erlebt und kann einen tip zu abhilfe geben?

vielleicht poste ich mal den css-code, auch wenn er etwas viel sein mag . ich vermute ja auch, dass es einfach ein unglückliches zusammentreffen mehrerer parameter ist, so dass man nicht einfach sagen kann, mach dies oder mach jenes anders.

also hier die css-angaben:

/* --- oben  links --- */
#links { position:absolute; padding:10px 0 0 20px; width:71%; z-index:1; }
* #links { height:100px; width:60%; font-size:.9em; background:#FFF; border-bottom:dashed 1px #999; }
.links-versteckt { position:absolute; padding:10px 0 0 20px; width:71%; z-index:2; visibility:hidden; }
* .links-versteckt { height:100px; width:60%; font-size:.9em; background:#FFF; border-bottom:dashed 1px #999; }
#links h1 { margin:0; }
.links-versteckt h1 { margin:0; }

/* --- oben rechts --- */
#rechts { position:absolute; font-size:.9em; width:40%; margin:0; padding:4px 0; text-align:right; border:none; z-index: 3; }
* #rechts { height:100px; width:42%; left:58%; padding:10px 0 0; background:#FFF; border-bottom:dashed 1px #999; }
#rechts p { text-align:right; margin:4px; }
* #rechts p { margin:5px; }
* #rechts a { background:#F5F5F5; border:solid 1px #999; padding:0 4px; }
* #rechts a:hover { background:#FFF; text-decoration:none; }

danke

Klaus

  1. Hallo,

    hat das schon mal jemand erlebt

    ja, aber _nur_ im IE 5

    und kann einen tip zu abhilfe geben?

    dazu wäre ein Link zu einer Seite, wo man sich das live anschauen kann, eventuell hilfreich
    Gruß Fritz

    --
    ss:( zu:| ls:# fo:| de:/ va:) ch:? sh:( n4:? rl:? br:$ js:| ie:| fl:| mo:)
    1. hat das schon mal jemand erlebt
      ja, aber _nur_ im IE 5

      bei mir nur im ie6. im ie5 funktionierts.

      dazu wäre ein Link zu einer Seite, wo man sich das live anschauen kann, eventuell hilfreich

      leider kann ich das ganze noch nicht online anbieten.

      naja, ist auch kein beinbruch. da muss der geneigte ie6-surfer eben durch.
      hatte nur gehofft, dass jemand sagen kann: schreib einfach
      a:hover {verrücken:false}
      und dann klappts.

      trotzdem danke

      Klaus

  2. Hallo,

    also hier die css-angaben:

    /* --- oben  links --- */
    #links { position:absolute; padding:10px 0 0 20px; width:71%; z-index:1; }
    * #links { height:100px; width:60%; font-size:.9em; background:#FFF; border-bottom:dashed 1px #999; }
    .links-versteckt { position:absolute; padding:10px 0 0 20px; width:71%; z-index:2; visibility:hidden; }
    * .links-versteckt { height:100px; width:60%; font-size:.9em; background:#FFF; border-bottom:dashed 1px #999; }
    #links h1 { margin:0; }
    .links-versteckt h1 { margin:0; }

    ich würde allerdings interessieren, was die * vor bestimmten Zeilen bewirken. Sollen das Kommentare sein?
    Kann jemand dazu näheres erklären?

    Gruß Fritz

    --
    ss:( zu:| ls:# fo:| de:/ va:) ch:? sh:( n4:? rl:? br:$ js:| ie:| fl:| mo:)
    1. ich würde allerdings interessieren, was die * vor bestimmten Zeilen bewirken. Sollen das Kommentare sein?

      nein, es versteckt den code nur vor netscape 4.x

      Klaus

    2. Hi,

      ich würde allerdings interessieren, was die * vor bestimmten Zeilen bewirken. Sollen das Kommentare sein?

      Nein, CSS-Kommentare sind nur in der Form
      /* Kommentar */, also mit /* am Anfang und mit */ am Ende möglich.

      * ist der Selektor für beliebige Elemente.

      cu,
      Andreas

      --
      MudGuard? Siehe http://www.mud-guard.de/
  3. hallo klaus,

    glaube nicht, dass das was mit dem a:hover zu tun hat :

    habe selbiges problem auf einer homepage die ich gestaltet habe!

    dort habe ich eine kleine bildergalerie aufgebaut. die bilder werden dort in einem i-frame dargestellt, rechts und links der bilder habe ich per css zwei buttons plaziert ( weiter / zurück ). im i-frame habe ich dann, ebenfalls per css, den befehl overflow: auto eigebaut. das alles funktioniert wunderbar, solange die gezeigten bilder im querformat vorliegen. bei bildern im hochformat passiert folgendes : da die angezeigte html-seite dann in der höhe nicht mehr in i-frame passt, wird der rechte scrollbalken eingeblendet. der rechte "weiter"-button wird wie definiert dargestellt ( top: 320px; right: 20px; position: absolute; ) und zwar genau 20px von der aussenkante des i-frames. fährt man nun mit dem mauszeiger über diesen button, "springt" dieser nacht links, und zwar genau um die breite des scrollbalkens. es scheint so, als ob der ie sich erstmal an der aussenkante des i-frames orientiert und dann, wenn die mausaktion durchgeführt wird, den button auf die "neue" position (mit abstand zum scrollbalken) verschiebt.

    wie man's ändern oder vermeiden kann hab ich bisher auch noch nicht 'rausgefunden. dieser effekt tritt übrigens nur bei den ie-versionen 5.x und 6 auf - bei opera, mozilla, firebird usw. gibts keine "springende" buttons.

    den "springenden" button kann man übrigens auf "www.garuda-sailing.com" in der bilder-gallerie begutachten !

    gruss kadees

    1. hallo Kadees,

      auch ich glaube, dass es irgendwas mit dem scrollbalken zu tun hat, da wie du schon sagtes, der sprung um die breite des scrollbalkens passiert.

      vielleicht siehts in ie7 mal besser aus ;-)

      Klaus