nicht angemeldet
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ä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>