PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML CSS Problem

Lawe
2004-06-14, 16:54:32
Folgendes Problem:
Habe ein Menü mit Html und CSS erstellt, es funktioniert soweit auch, nur habe ich folgendes Problem
im IE 6.X Sieht das Menü so aus:
http://lawe.homeip.net/bild_ie.jpg

Im Mozilla/Firefox sieht es folgendermaßen aus:
http://lawe.homeip.net/bild_firefox.jpg

Wie schaffe ich es, dass Mein Menü im Firefox genauso aussieht wie im IE?

Was ist an meinem Code falsch?

Gruß Lawe



HTML Teil für das Menü:

<TABLE id="middletb" width=135>
<TR>
<TD align="middle"><A class="navi" href="#">News</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">About Me</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">My Network</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">Tipps und Tricks</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">Fun Stuff</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">Bilder</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">Links</A></td>
</TR>
<TR>
<TD align="middle"><A class="navi" href="#">Gästebuch</A></td>
</TR>
</TABLE>


style.css

A.navi:link {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 0px;
WIDTH: 125px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana;
HEIGHT: 20px;
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
A.b.navi:visited {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 0px;
WIDTH: 125px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana;
HEIGHT: 20px;

TEXT-ALIGN: center;
TEXT-DECORATION: none
}
A.b.navi:hover {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 0px;
WIDTH: 125px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana;
HEIGHT: 20px;
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
A.b.navi:active {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 0px;
WIDTH: 125px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana;
HEIGHT: 20px;
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
A.navi:link {
BORDER-RIGHT: #ffffff 0px solid;
BORDER-TOP: #ffffff 0px solid;
BORDER-LEFT: #ffffff 0px solid;
COLOR: #000000;
BORDER-BOTTOM: #ffffff 0px solid;
BACKGROUND-COLOR: #ffffff
}
A.b.navi:visited {
BORDER-RIGHT: #ffffff 0px solid;
BORDER-TOP: #ffffff 0px solid;
BORDER-LEFT: #ffffff 0px solid;
COLOR: #000000;
BORDER-BOTTOM: #ffffff 0px solid;
BACKGROUND-COLOR: #ffffff
}
A.navi:hover {
BORDER-RIGHT: #000000 0px solid;
BORDER-TOP: #000000 0px solid;
BORDER-LEFT: #000000 0px solid;
COLOR: #ffffff;
BORDER-BOTTOM: #000000 0px solid;
BACKGROUND-COLOR: #000000
}
A.b.navi:active {
BORDER-RIGHT: #000000 0px solid;
BORDER-TOP: #000000 0px solid;
BORDER-LEFT: #000000 0px solid;
COLOR: #ffffff;
BORDER-BOTTOM: #000000 0px solid;
BACKGROUND-COLOR: #000000
}
Nase
2004-06-14, 17:07:38
Das hier müsste eigentlich genau das machen, was du haben willst:

<html>
<head>

<style type="text/css">
<!--

a:link, a:visited {
background-color: #fff;
color: #000;
display: block;
font-size: 12px;
height: 20px;
text-align: center;
text-decoration: none;
width: 125px;
}

a:hover {
background-color: #000;
color: #fff;
}

//-->
</style>
</head>
<body>

<a href="#">Punkt 1</a>
<a href="#">Punkt 2</a>
<a href="#">Punkt 3</a>
<a href="#">Punkt 4</a>
<a href="#">Punkt 5</a>
<a href="#">Punkt 6</a>

</body>
</html>
Lawe
2004-06-14, 17:31:16
THX Geht soweit, aber ich will, dass in meinen bestehende Stylesheet code von oben einbinden.
außerdem hat deine Lösung einen nachteil, alle anderen links auf der seite werden nun auch schwarz hinterlegt... :(

Weist du dafür auch was?

Gruß Lawe
Nase
2004-06-14, 17:34:34
Klar. Änder das a durch zb. .menu und schreib in den Link class="menu". Fertig.

.menu:link usw.
Lawe
2004-06-14, 17:38:55
Perfekte Lösung!

Big THX!