Firefox Und Safarie Darstellungsproblem Bei <a> S

Hiho!

Ich stehe im Moment vor einem Rätsel. Weiß leider auch nicht wonach ich suchen soll dafür.

Ich habe eine Seite erstellt, mit einer Navigation, die durch ein Logo getrennt ist.

Der linke Teil der Navigation funktioniert ohne Probleme, aber der rechte Teil wird in Firefox und Safari zwar richtig dargestellt, aber der "Linkfänger" (also dass sich der Mauszeiger ändert) ist ca 1 px groß und das unterhalb des eigentlichen Links!

Der Code ist aber 1:1 gleich

Hier die relevanten Codezeilen:

HTML:

CODE

<body>
<div id="top"></div>
<div id="content">
<div id="logo"><a href="index.html" title="Goto home"><img src="Bilder/logo.gif" border="0" alt="logo"/></a></div> 
<div id="navi">
<div class="navi_left">
<ul>
<li><a id="aktiv" href="index.html" title="Home">Home  </a>|</li>
<li><a href="uuns.html" title="Über Uns">  Über Uns  </a>|</li>
<li><a href="aktuelles.html" title="Aktuelles">  Aktuelles</a></li>
</ul>
</div> 
<div class="navi_right">
<ul>
<li><a href="galerie.html" title="Galerie">Galerie  </a>|</li>
<li><a href="kontakt.html" title="Kontakt">  Kontakt  </a>|</li>
<li><a href="impressum.html" title="Impressum">  Impressum</a></li>
</ul>
</div> 
</div> 

<br clear="both"/>
<div id="inhalt">
...

CSS:

CODE

#top{
margin: 0;
padding:0;
background-color:#d8ffda;
width: 100%;
height: 70px;
border-bottom: 1px solid #369c3b;
}
#content{
margin: 0 auto;
padding: 0;
width: 1000px;
height: auto;
}

#logo{
margin: 0;
padding: 0;
position: relative;
top: -32.5px;
left: 367px;
z-index: 1;
}

/*---------------------------------------------------------------------
* NAVIGATION
*----------------------------------------------------------------------*/

#navi{
margin-top: -60px;
margin-left: 50px;
width: 930px;
height: 38px;
}

/* LEFT */
.navi_left{
float:left;
width: 300px;
font-size: 14px;
height: 18px;
}

.navi_left ul, .navi_right ul{
list-style: none;
}

.navi_left li{
float:left;
}

.navi_left a, .navi_right a{
color: #369c3b;
text-decoration: none;
}

.navi_left a:hover, .navi_left a#aktiv{
font-weight:bold;
}

/* RIGHT */
.navi_right{
float:right;
width: 300px;
font-size: 14px;
height: 18px;
}

.navi_right li{
float:left;
}

.navi_right a:hover, .navi_right a#aktiv{
font-weight:bold;
}

/*-----------------------------------------------------------
* NAVIGATION ENDE
*------------------------------------------------------------*/

Wie gesagt, IE's und Opera keine Probleme, nur mit Firefox und Safari

lg

Dieser Beitrag wurde von bluescorp bearbeitet: 11. September 2009 - 11:26

WinFuture-Forum.de: Firefox Und Safarie Darstellungsproblem Bei <a> S - WinFuture-Forum.de