Cyberholli: unerwünschter "Mouseover-Effekt"

SELF-Forum

unerwünschter "Mouseover-Effekt"

Cyberholli
– Informationen zu den Bewertungsregeln

Hallo Ihr,

mit Hilfe von Css habe ich Links in Boxen positioniert. Auf ein Mal erhalte ich einen witzigen aber überhaupt nicht gewünschten
"Mouseover-Effekt". Dieser tritt im Internet-Explorer auf.
Was passiert?
Wenn ich mit der Maus über diese Links nach unten ziehe, geben die inneren ihren Abstand zueinander auf.
(gegebenenfalls musste ich diese links vorher mal anklicken)
Ziehe ich den Cursor wieder nach oben, ist der Abstand wieder da.
Sogar bei dieser isolierten Seite, es kann also nichts anderes den IE irritieren.

Ich kann mir das Verhalten nicht erklären.

Daher bitte ich euch um Info, woher das kommt und wie ich das "springen" zukünftig vermeiden kann.

Vielen Dank im Voraus

Cyberholli

Hier füge ich zum besseren Nachvollziehen den Quelltext bei.
Der Übersichtlichkeit halber habe ich die styles eingebettet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>Service</title>

<style type="text/css">
            <!--

body{
  background-color:#FFF0E1;
    scrollbar-face-color: #cccccc;
  scrollbar-shadow-color: #cccccc;
  scrollbar-highlight-color:#FFF0E1;
  scrollbar-3dlight-color: #cccccc;
  scrollbar-darkshadow-color: #cccccc;
  scrollbar-track-color: #FFF0E1;
  scrollbar-arrow-color: #FFF0E1;

}
h1{font-size:2em;font-family:"Lucida Calligraphy";color:#808080;}
h2{font-size:11pt;font-family:"Lucida Calligraphy";color:#808080;}
h3{font-size:2.7em;font-family:"Lucida Calligraphy";color:#808080;}
h4{font-size:1.6em;font-family:"Lucida Calligraphy";color:#808080;}
h5{font-size:11pt;font-family:"Lucida Calligraphy";color:#808080;margin-left:150pt;}

.lucy1{font-family:"Lucida Calligraphy";font-size:3.6em;color:#990033;}
.lucy2{font-family:"Lucida Calligraphy";font-size:1.9em;color:#808080;}
.lucy3{font-family:"Lucida Calligraphy";font-size:1.2em;color:#808080;}
.lucy4{font-family:"Lucida Calligraphy";font-size:30pt;font-weight : bold;color:#808080;margin-left:250px;}
.lucy5{font-family:"Lucida Calligraphy";font-size:16pt;color:#808080;}

.link
  {display:block;text-align:center; vertical-align:center;width:7.5em;height:1.6em;border:4px solid #C8C8C8;
  padding:0.2%;text-decoration:none;margin-bottom:25px; /**/
  font-family: arial;font-weight : bold; font-size:1em;}
 .link:link
  {color:#E0DDDD;background-color:#aaaaaa;}
 .link:visited
  {color:#808080;background-color:#E0DDDD;}
 .link:hover
  {color:#FFF0E1;background-color:#aaaaaa;}
 .link:active
  { text-decoration:none; font-weight:bold;color:#00000a; background-color:#FFF0E1; }

#head       /*in diese Box sollen die Überschrift und die head-Grafiken*/
{
 border:solid 2px maroon;
 margin-left:18%;
 padding-bottom:0.5%;
}

#links
 {
 border:solid 1px blue;
 float:left;
 padding-top:1.5%;
 padding-left:0.5%;

}
.box11
{
float:left;
width:18%;
margin:0;
padding:0;
}

.box22       /*zusätzliche Links auf der Service-Seite*/
{
float:left;
width:280px;
margin:0;
padding:0;
border:solid 2px maroon;
}

.box33
{
float:left;
width:auto;
margin:0;
padding:0;
border:solid 2px maroon;
}

-->
         </style>
</HEAD>
<body>
<div id="head">   <!-- Überschrift und head-Grafiken -->
<img src="../grafik/engel_links.gif" width="70" height="67">

<span class="lucy3">Eine ausgerichtete Überschrift mit Grafik</span>

<img src="../grafik/engel_rechts.gif" width="70" height="67">
<img src="../grafik/g.gif">
</div>

<div class="box11">    <!-- in dieser Datei für die äußeren Links -->
<a class="link"  href="../files/service.html" >Service </a>
<a href="../files/kontakt.html" class="link">Kontakt</a>
<a href="../files/impressum.html" class="link">Impressum</a>
<a href="../files/email.html" class="link">e-mail</a>
<a href="../files/agb.html" class="link">AGB</a>
<a href="../index.html" class="link">Startseite</a>
</div>

<div class="box22">
<a href="hochzeit.html" class="link">Hochzeiten</a>
<a href="jubil.html" class="link">Jubil&auml;en</a>
<a href="feiern.html" class="link">Feiern, Parties</a> <!-- das ursprüngliche " / " sorgte beim IE für Zeilenumbruch im Link -->
<a href="bfeste.html" class="link">Betriebsfeste</a>
<a href="reisen.html" class="link">Reisen</a>
</div>

<div class="irgendeiner">
<img src="irgendwas.jpg" alt="ein Foto">
</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. unerwünschter "Mouseover-Effekt"

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Wenn ich mit der Maus über diese Links nach unten ziehe, geben die inneren ihren Abstand zueinander auf.

    Tipp zur Fehlersuche:
    Versuche das Problem so weit wie möglich einzugrenzen. Es tritt nämlich auch in folgendem Beispiel schon auf:
    ...
    <html>
    <head>
    <title>Service</title>
    <style type="text/css">
    <!--
     .link1
      {display:block; width:7.5em; height:1.6em; margin-bottom:25px;}
     .link1:link
      {color:#E0DDDD; background-color:#AAA;}
     .link1:visited
      {color:#808080; background-color:#E0DDDD;}
     .link1:hover
      {color:#FFF0E1; background-color:#AAA;}
     .link1:active
      {text-decoration:none; font-weight:bold; color:#00000A; background-color:#FFF0E1;}
    -->
    </style>
    </head>
    <body>
    <a href="#" class="link1">Service</a>
    <a href="#" class="link1">Kontakt</a>
    <a href="#" class="link1">Impressum</a>
    <a href="#" class="link1">e-mail</a>
    <a href="#" class="link1">AGB</a>
    <a href="#" class="link1">Startseite</a>
    </body>
    </html>

    Btw.: Ich habe Deine Klassenbezeichnung leicht abgeändert. Es ist _nie_ eine gute Idee solche Bezeichnungen mit bereits belegten Schlüsseln zu überlagern.

    Warum es auftritt, kann ich Dir nicht genau begründen. Es kann damit zusammenhängen, dass Margins angenzender Elemente laut CSS Spezifikation gegebenenfalls zusammenfallen. http://www.w3.org/TR/CSS21/box.html#collapsing-margins Inwieweit das der IE hier richtig oder falsch interpretiert, ist aber nebensächlich, weil Du das Ganze weit besser lösen kannst, indem Du die Link-Liste auch als HTML-Liste auszeichnest.
    ...
    <html>
    <head>
    <title>Service</title>
    <style type="text/css">
    <!--
     .link1
      {display:block; width:7.5em; height:1.6em;}
     .link1:link
      {color:#E0DDDD; background-color:#AAA;}
     .link1:visited
      {color:#808080; background-color:#E0DDDD;}
     .link1:hover
      {color:#FFF0E1; background-color:#AAA;}
     .link1:active
      {text-decoration:none; font-weight:bold; color:#00000A; background-color:#FFF0E1;}

    ul {margin:0; padding:0; list-stle-type:none; width:7.5em;}
    li {margin-bottom:25px;}
    -->
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#" class="link1">Service</a></li>
    <li><a href="#" class="link1">Kontakt</a></li>
    <li><a href="#" class="link1">Impressum</a></li>
    <li><a href="#" class="link1">e-mail</a></li>
    <li><a href="#" class="link1">AGB</a></li>
    <li><a href="#" class="link1">Startseite</a></li>
    </ul>
    </body>
    </html>

    Eventuell schaffst Du es so sogar, dass das UL-Element Dein DIV.box11 vollständig ersetzen kann. Das wäre dann am elegantesten.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. unerwünschter "Mouseover-Effekt"

    Schuer
    – Informationen zu den Bewertungsregeln

    Ich kann mir das Verhalten nicht erklären.

    Diese Seite zeigt dir vielleicht, an welchem IE-Bug es liegt: http://www.positioniseverything.net/explorer.html

    Viele Grüße!
    _ds

    --
    DECAF° agentur für digitale kommunikation
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln