R
R3DL10N
Guest
Hallo!
Ich habe mir eine Navigationsleiste gebastelt, die aus einer Grafik besteht,
dort sind Beschriftungen etc. schon drin.
Bild der Navi:
Dazu gibt es folgenden Code:
Wenn ich jetzt aber das HTML Dokument mit Firefox öffne, sieht das so aus:
Wie man sieht, ist der "Home" - Link weiter in die Mitte verschoben, sodass
die Hover-Grafik am falschen Platz dargestellt wird. Wie kann ich das Problem lösen?
Ich habe mir eine Navigationsleiste gebastelt, die aus einer Grafik besteht,
dort sind Beschriftungen etc. schon drin.
Bild der Navi:
Dazu gibt es folgenden Code:
HTML:
<html>
<head>
<title>BLU3 L10N :: Home</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="navi">
<ul>
<li><a href="" class="homeButton" title="Home">Home</a></li>
</ul>
</div>
</body>
</html>
Code:
#navi {
height:38px;
width:600px;
background-image:url("navigation.png");
background-position:0 0;
background-repeat:no-repeat;
}
#navi ul {
list-style-type:none;
}
#navi li {
font-size:1.5em;
display:inline;
line-height:38px;
}
#navi a {
padding:0 10px;
margin:0;
float:left;
}
#navi a:hover {
margin:0;
float:left;
background:url("navigation.png") no-repeat scroll 0 -38px;
}
#navi a.homeButton {
margin:0;
height:38px;
width:90px;
}Wenn ich jetzt aber das HTML Dokument mit Firefox öffne, sieht das so aus:
Wie man sieht, ist der "Home" - Link weiter in die Mitte verschoben, sodass
die Hover-Grafik am falschen Platz dargestellt wird. Wie kann ich das Problem lösen?
