Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

MMMichael · 10-03-2009, 10:51

Hab ein Problem:
Ich hab Links in meinem Menü die per CSS mit einem einfachen Hover-farbwechsel-effekt versehen sind. Firefox zeigts an, genauso der IE und Safari. Aber Google Chrome weigert sich. Der Link ist weiß, Maus drüber-> er bleibt es.

Die relevanten Auscchnitte aus dem HTML-Code und dem Stylesheet:

HTML-Code:

<body>

<div id="logo">
  <div id="menu">
   <a  href="home.htm">&nbsp;Home&nbsp;</a> &Iota; 
   <a class="menu" href="uber.htm">&nbsp;&Uuml;ber mich&nbsp;</a> &Iota;
   <a class="menu" href="ref.htm">&nbsp;Referenzen&nbsp;</a> &Iota;
   <a class="menu" href="kon.htm">&nbsp;Kontakt&nbsp;</a>
  </div>
</div>

Code:

body {
 background-image:url("top_back.png");
 background-repeat:repeat-x;
 background-position: top center;
 background-color:#DFDFDF;
 text-align:center;
 margin:0px;
}

#logo {
 margin-left: auto;
 margin-right: auto;
 width:640px;
 height:225px;
 background-image:url("title.png");
 background-repeat:no-repeat;
 background-position: top center;
 border:none;
 text-align:center;
}
#menu {
 margin-left: auto;
 margin-right: auto;
 width:550px;
 position:relative;
 top:168px;
 font-family:Arial,Helvetica,sans-serif;
 font-size:10pt;
 font-weight:normal;
 letter-spacing:0.1em;
 color:#FFFFFF;
 height:20px;
 border:1px #ffffff solid;
}

a:link {
 color:#005577;
 text-decoration:none;
 border:0px;
 border-bottom:1px dotted #0099AA;
}
a:visited {
 color:#AAAAAA;
 text-decoration:none;
 border:0px;
 border-bottom:1px dotted #AAAAAA;
}
a:hover{
 color:#00eeff;
 text-decoration:none;
 border:0px;
 border-bottom:0px solid #00eeff;
}

a.menu:link {
 font-family:Arial,Helvetica,sans-serif;
 font-size:10pt;
 font-weight:normal;
 letter-spacing:0.1em;
 color:#FFFFFF;
 text-decoration:none;
 border-top:0px;
 border-left:0px;
 border-right:0px;
 border-bottom:1px dotted #FFFFFF;
 padding-bottom:4px;
 padding-top:5px;
}
a.menu:visited {
 font-family:Arial,Helvetica,sans-serif;
 font-size:10pt;
 font-weight:normal;
 letter-spacing:0.1em;
 color:#FFFFFF;
 text-decoration:none;
 border-top:0px;
 border-left:0px;
 border-right:0px;
 border-bottom:0px;
 padding-bottom:4px;
 padding-top:5px;
}
a.menu:hover{
 font-family:Arial,Helvetica,sans-serif;
 font-size:10pt;
 font-weight:normal;
 letter-spacing:0.1em;
 color:#00EEFF;
 text-decoration:none;
 border-top:0px;
 border-left:0px;
 border-right:0px;
 border-bottom:1px dotted #FFFFFF;
 padding-bottom:3px;
 padding-top:5px;
}

(falls mir jemand zusätlich noch sagen kann, warum der IE das mit dem border-bottom beim Hovern nicht kapiert fänd ich das auch toll, aber damit kann ich leben. Mit Chromes Hoverproblem nicht.)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln