nicht angemeldet
Aufzählungzeichen verschwinden in IE
Hallo Leute,
ich habe jetzt schon lange gesucht und herumprobiert, kriege es aber nicht gebacken.
Ich will eine horizontale Navigation erstellen mit ul, li, float etc. Dabei soll aber das Aufzählungszeichen erhalten bleiben. Funktioniert in FF, nicht aber im IE6 unter W2K.
Workaround: Für jeden einzelnen Navigationspunkt eine UL mit nur einem LI und float für jede UL. Nicht sehr elegant.... (Code s.u.)
Gibt es keine ander Lösung?
Danke
Major
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
display: table;
}
#nav ul {
}
#nav li {
border: 1px dotted #0000FF;
width: 150px;
margin: 5px;
float: left;
}
#nav a {
text-decoration: none;
display: block;
background-color: #FFFF66;
border: 1px solid #FFFFFF;
width: 150px;
}
#nav a:hover {
background-color: #999999;
border: 1px solid #000000;
}
#nav2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}
#nav2 ul {
float: left;
width: 200px;
}
#nav2 li {
border: 1px dotted #0000FF;
margin-left: 15px;
}
#nav2 a {
text-decoration: none;
display: block;
background-color: #FFFF66;
border: 1px solid #FFFFFF;
width: 150px;
}
#nav2 a:hover {
background-color: #999999;
border: 1px solid #000000;
-->
</style>
</head>
<body>
<div id="nav">
<p> </p>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>
<p> </p>
</div>
<p> </p>
<div id="nav2">
<ul>
<li><a href="#">test1</a></li>
</ul>
<ul>
<li><a href="#">test2</a></li>
</ul>
<ul>
<li><a href="#">test3</a></li>
</ul>
<p> </p>
</div>
<p> </p>
</body>
</html>
-
Hey!
Zwei Ideen:
Schon mal mit margin-left herumgespielt? Ich kann mir gut vorstellen, dass die List-Zeichen vorhanden sind, nur eben nicht in einem sichtbaren Bereich.
Mal mit eigenem Image versucht? Durch eigene Symbole erspart man sich auch Browser-Unterschiede (z. B. FF und IE).Grüße
Thorsten-
Grüße,
Mal mit eigenem Image versucht? Durch eigene Symbole erspart man sich auch Browser-Unterschiede (z. B. FF und IE).
weh da zoomt einer^^
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi bleicher,
Mal mit eigenem Image versucht? Durch eigene Symbole erspart man sich auch Browser-Unterschiede (z. B. FF und IE).
weh da zoomt einer^^Was wäre denn, wenn einer Zoomt? Das Aufzählungs Zeichen mit der Seite skalieren ist doch nicht von belang.
Eine Website sollte in der regel Skalierbar sein, aber doch nicht alles was in ihr steckt.
Ich finde bei solchen geschichten img´s eh Sinnvoller, da man dadurch nicht auf die wenigen
list-style-type:,
die man zur verfügung hat angewiesen ist.MM.
Grüße aus H im R,
Engin
-
-
Hallo Thorsten,
Schon mal mit margin-left herumgespielt? Ich kann mir gut vorstellen, dass die List-Zeichen vorhanden sind, nur eben nicht in einem sichtbaren Bereich.
Habe ich bei der zweiten Lösung, da genau das passiert, was du vermutest. li hat margin-left von 15px, annsonsten ist die bullet weg (nut IE)
Klappt aber bei der der ersten Lösung leider nicht :-)
Mal mit eigenem Image versucht? Durch eigene Symbole erspart man sich auch Browser-Unterschiede (z. B. FF und IE).
Wie bereits geschrieben: Niht sehr elegant :-)
Danke trotzdem.
Gruß
Major
-
-
Hallo Major,
verwende für die <li>-Elemente display:inline, dann brauchst du kein float:left;
Gruß
ottogal-
Uups, nee, dann gibts natürlich schon gar keine Aufzählungszeichen - sorry.
Ottogal -
Hallo Major,
verwende für die <li>-Elemente display:inline, dann brauchst du kein float:left;
Hallo ottogal,
dann verschwinden die Zeichen auch im FF :-(
Gruß
Major
-
