Ergebnis 1 bis 6 von 6

Thema: IE-Bug bei Hover über Links

  1. #1
    HTML Newbie
    Registriert seit
    01.11.2006
    Ort
    Hamburg
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard IE-Bug bei Hover über Links

    Hallo,
    wahrscheinlich kennt ihr dieses Problem schon in ähnlicher Weise, aber so wie bei mir habe ich es bisher noch nicht gesehen und erst recht keine funktionierende Lösung gefunden, darum bitte ich Euch alle um Mithilfe:

    Das Problem tritt nur im IE auf (wir benutzen IE 6): Die untenstehende Beispielseite (stark vereinfacht) sieht beim Aufruf ok aus; die beiden Logos "Rechtslogo 1" und "Rechtslogo 2" befinden sich genau in der oberen rechten Ecke. Wenn ich jedoch unten mit der Scrollbar nach rechts scrolle, so dass besagte logos nicht mehr in der rechten Ecke sind und anschliessend mit der Maus über den ersten Link in der Mitte fahre ("Dies ist der erste link"), so wird das Rechtslogo 1 neu positioniert und springt erneut in die rechte Ecke. Analog geschieht das mit Rechtslogo 2 (unter Rechtslogo 1), wenn ich mit der Maus über den zweiten Link in der Mitte fahre.
    Zusätzlich wird Rechtslogo 1 auch dann neu in der Ecke positioniert, wenn ich direkt über das Rechtslogo fahre.

    Soweit ich gehört habe, sollen diese Hover-Probleme im IE 7 behoben sein. Kann man für IE6 hier auch ohne viel Aufwand etwas machen, damit die Logos nicht neu positioniert werden ?
    Wenn ich im Stylesheet bei a:hover die Background-Farbangabe entferne, bleibt Rechtslogo 1 an Ort und Stelle ... nur würde ich die Farbänderung beim Hover gern behalten.

    Wisst ihr Rat ?

    Hier ist erstmal die HTML-Seite:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
    <head>
    <link rel="stylesheet" href="./teststylesheet.css" type="text/css" title="stylesheet" />
    </head>

    <body>
    <div id="wrap">
    <div id="left" >
    [img]./logo1.gif[/img]</img>
    <ul id="left_navigation" >[*]Menuepunkt 1[/list]
    </div>

    <div id="Inhalt" >
    <div id="top" >

    [img]./top1.jpg[/img]</img>

    <a href="www.x.de" id="link_logo_rechts">
    [img]./rechts1.gif[/img]</img>
    </a>

    <ul id="top_navigation">
    Dies ist der ERSTE Link[/list]

    <ul id="mehrsprachigkeit">[*][img]./de1.gif[/img]</img>[/list]

    </div>



    <div id="micronavi">
    Dies ist der ZWEITE Link
    </div>

    <div id="content">
    <h2>Ergebnistabelle:</h2>
    <table>
    <tr>
    <td>Spalte01Spalte01</td> <td>Spalte02Spalte02</td>
    <td>Spalte03Spalte03</td> <td>Spalte04Spalte04</td>
    <td>Spalte05Spalte05</td> <td>Spalte06Spalte06</td>
    <td>Spalte07Spalte07</td> <td>Spalte08Spalte08</td>
    <td>Spalte09Spalte09</td>
    </tr>
    </table>

    </div>
    </div>
    </div>
    </body>
    </html>


    ... und hier der Inhalt von teststylesheet.css:

    * { margin:0; padding:0; }
    html, body { height:100%; }

    body { padding-left: 12em; /* Versatz wegen linker Menueleiste. */
    color: black; font-family: verdana, sans-serif; }

    * html #wrap { height: 1%; } /* für IE */

    #left {
    width:11.5em; /* Breite von 11.5em */
    float:left; /* Textumfluss: Links */
    margin-top: 0.5em; /* Oberer Rand: 0.5em */
    margin-left:-11.5em; /* Versatz linker Rand */
    overflow: hidden;
    }

    * html #left {
    position:relative; /* sichtbar machen */
    display:inline; /* doubled float-margin */
    margin-right:0; /* kein rechter Rand */
    }

    #Inhalt { width:100%; margin-left:-1px; }

    div#Inhalt {
    padding: 1em;
    margin: 0px 0em 0px -0.5em;
    }

    * html #Inhalt { float:left; } /* für IE */
    * html div#Inhalt { margin-left: -0.3em; } /* für IE */

    ul#left_navigation {
    padding: 0.25em; /* Abstand: 0.25 em */
    font-size: 0.7em; /* Schriftgroesse: 0,7em */
    width: 14.8em; /* Breite: 14.8em */
    }

    html ul#left_navigation {
    padding-left: 0.25em; /* Abstand links: 0.25em */
    width: 14.8em; /* Breite: 14.8em */
    }

    /* Aufzaehlung linke Navigation */
    ul#left_navigation li { margin: 0.25em; list-style-type: none; }

    /*Links in linker Navigation */
    ul#left_navigation a {
    padding: 0.5em; /* Abstand: 0.5em */
    display: block; /* Display:block */
    font-weight: bold; /* Fettschrift */
    background-color: #e0e0e0; /* Hintergrund: grau */
    text-decoration: none; /* Text-Dekoration: Ohne */
    width: 13.1em; /* Breite: 13.1em */
    }

    /* Top-Navigation */
    ul#top_navigation {
    border-width: 0px;
    font-size: 0.7em; /* Schriftgroesse: 0.7em */
    margin-right: 17.1em; /* rechter Rand: 17.1 em */
    background-color: #205671; /* Hintergrund: blau */
    text-align: center; /* Text zentriert */
    }

    * html ul#top_navigation { margin-right: 18.3em; } /* für IE */

    /* Link in Liste in der Top-Navigation */
    ul#top_navigation a {
    font-weight: bold; /* Schriftstil: fett */
    color: white; /* Schriftfarbe weiss */
    background-color: #205671; /* Hintergrund: blau */
    text-decoration: none; /* Text-Dekoration: ohne */
    }

    div#micronavi { font-size: 0.7em; }
    div#content { font-size: 0.8em; padding-right: 1em; }
    a:hover { background: #eeeeee; } /* GRUND FÜR IE-HOVER-VERSCHIEBUNG RECHTSLOGO ?! */
    H2 { padding-top:1em; }

    #link_logo_rechts {
    right: 8px; top: 8px; position: absolute; }

    ul#mehrsprachigkeit {
    padding-left: 0.6em;
    font-size: 0.7em;
    right: 0.6em;
    width: 13.9em;
    position: absolute;
    margin-top: -1.15em;
    height: 1.15em;
    background-color: #c0c0c0;
    text-align: center;
    }

    * html ul#mehrsprachigkeit { padding-left: 0.4em; }
    html ul#mehrsprachigkeit { width: 13.75em; }
    ul#mehrsprachigkeit li { list-style-type: none; }
    ul#mehrsprachigkeit a { border: 0px; }
    TD { BORDER: #000 1px solid; }

    #logo_links { width:11em; height:8.1em; }
    #top_grafik { width:14.2em; height:6.6em; }
    #logo_rechts { width:10.4em; height:6em; }
    #spr { width:3em; height:1em; }


    (sorry, das Attachement hinzufügen ging irgendwie nicht, darum habe ich css-Inhalt & html-Seite direkt hierher kopiert).

    Ich danke euch vielmals im Voraus für eure Hilfe !

    Viele Grüße,
    Landoran
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    01.11.2006
    Ort
    Hamburg
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Jetzt nochmal mit Attachment !

    Hallo,
    ich habe jetzt mein css in das HTM-File integriert und als Attachment gespeichert. Zum Ausprobieren muss die Datei (Testtabelle1) nur von txt in htm umbenannt werden.
    Ich freue mich über jede Anregung und hoffe, dass jemand eine Lösung weiß.
    Vielen Dank schon mal,
    Gruß Landoran
    Angehängte Dateien Angehängte Dateien

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    01.11.2006
    Ort
    Hamburg
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    p.s. auf die Grafiken selbst habe ich hier verzichtet, um es einfach zu halten, da ich momentan nicht die Möglichkeit habe, die (noch unfertige) Seite online zu stellen. Die eine Datei selbst genügt aber vollkommen -- die angezeigten "Grafikrahmen" genügen ja, um die Neupositionierung zu sehen.

    Viele Grüße, L.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    01.11.2006
    Ort
    Hamburg
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    und nochmal ich ...

    ich stelle die Seite hiermit nochmal neu ein, noch etwas abgespeckter und auf XHTML1.1 VALID geprüft (was allerdings an dem Bug nichts ändert).
    Die Seite ist so aber übersichtlicher.

    Die Seite muss nach dem Download nur in .HTM umbenannt werden, mehr ist nicht nötig.

    Danke schon mal für eure Tipps !

    Grüße, Landoran
    Angehängte Dateien Angehängte Dateien

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Die genaue Fehlerbehebung kann ich dir momentan nicht sagen. Die Ursache scheint aber beim
    Code:
    #link_logo_rechts
    zu liegen. Wenn du hier das position:absolute weglässt, ist auch der unerwünschte Hover-Effekt weg.
    Allerdings stimmt dann die Anordnung nicht mehr.
    Versuch mal generell ohne position:absolute auszukommen und arbeite stattdessen mit floats und margins.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    01.11.2006
    Ort
    Hamburg
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo Sejuma,

    danke für deine Antwort. Ja, daran dachte ich auch schon, aber wie du gesagt hast, wird das Layout ohne absolute ziemlich zerstückelt ... mit float hab ich es bisher nicht richtig hinbekommen. Aber wenn ich nicht herausfinde, wie der Effekt trotz absolute verschwindet, werde ich es wohl in der Richtung versuchen müssen ...
    Erstmal vielen Dank !

Ähnliche Themen

  1. a:hover bei bereits besuchten Links
    Von secretagent im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.03.2008, 18:51
  2. frage wegen css und hover bei links
    Von arnim im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.06.2007, 01:02
  3. Hover links - nur unterstreichen
    Von Gast im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 27.09.2005, 18:42
  4. Hover Links unterstruchen?
    Von Gast im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.09.2005, 18:00
  5. Hover Links??
    Von gast im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2005, 13:40

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •