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> <!-- logo -->
<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> <!-- navi left -->
<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> <!-- navi right -->
</div> <!-- navi -->
<br clear="both"/>
<div id="inhalt">
...
<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> <!-- logo -->
<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> <!-- navi left -->
<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> <!-- navi right -->
</div> <!-- navi -->
<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
*------------------------------------------------------------*/
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