horizontale liste im IE 5 mit hintergrundbild bzw. aufzählungszeichen

**alexf812** · 27.02.2005, 14:02

hallo leute,

ich bekomm es einfach nicht hin im ie5 ne vernünftige liste zu erstellen. entweder nimmt er nicht das padding für den abstand hintergrundbild zum text oder wenn ich es mit aufzählungszeichen versuche dann verschwinden diese sofort bei der angabe display: inline;
ist es überhaupt möglich im IE 5 was vernünftiges hinzubekommen?

**Terry** · 27.02.2005, 14:18

Horizontale Listen funktionieren im IE 5 nur mit float, da er wie gesagt auf padding nicht reagiert, was man sonst ja braucht.

Du mußt dann aber klar definierte Breiten für jeden Listenpunkt vergeben, weil float immer width braucht.
Also sowas in der Art:

HTML-Code:

#menu ul {
          margin:0;
          padding:0;
          list-style-type:none;
         }          
#menu li {
        list-style-type:none;
        float:left;
        width:9em;
        margin:0;
        padding:0;
        }
#menu li a {
        display:block;
        color:#fff;
        background-color:#26799b;
        font-weight:bold;
        text-align:center;
        text-decoration:none;
        padding:0.2em 0 0.5em 0;
        }

**alexf812** · 27.02.2005, 15:55

hallo terry,

kann ich da jetzt auch ein hintergrundbild einsetzen?

**Boris** · 27.02.2005, 16:26

Versuch es doch einfach, es geht schon nix kaputt

**alexf812** · 27.02.2005, 16:45

also versucht hab ich es ja, nur das problem ist, bei der festen breite ist zw. den einzelnen menüeinträgen unterschiedlich viel platz, wenn die wortlänge unterschiedlich ist. wenn das noch gehen würde das die abstände dazwischen gleich sind wäre super

**Boris** · 27.02.2005, 16:59

Terries Listenpunkte haben alle eine feste (und gleiche) Breite, ich versteh Deine Antwort jetzt nicht wirklich?

**hero-master** · 27.02.2005, 17:03

Hast du auch das display:block drinnen?
Wofür hammers denn

:
http://tuts.nicogutmann.de/css/rollovermenu , vielleicht hilft das ein wenig weiter?

**alexf812** · 27.02.2005, 17:21

ich habs jetzt soweit nur ich bekomm die liste nich in die mitte. das liegt anscheinend am float: left. das <div id="menu"> hat keine breitenangabe und füllt 100% des fensters und dort soll die liste in die mitte...leider klappts nich so richtig

**alexf812** · 27.02.2005, 18:05

hier mal der quelltext, nur ein problem, im FF sollte die breite von 100% durchgängig grau sein ist aber nur der streifen grau wo das menü ist...danke schon mal für einen tip.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<style>
#menubar
{
	width: 100%;
	border: 1px solid #000080;
	background-color: #ECECEC;
}

#menu
{
	width: 289px;
	margin: auto;
}

#menu ul {
          margin:0;
          padding:0;
          list-style-type:none;
}          

#menu li {
        list-style-type:none;
        float:left;
        /*width:7em;*/
        margin:0;
        padding:0 10px 0 10px;
        background-color: #ECECEC;
}

#menu li a {
        font-size: 11px;
        font-family: tahoma;
        display:block;
        color:#666666;
        background-image: url(../images/bullet.gif);
        background-repeat: no-repeat;
        background-position: 0 4px;
        font-weight:bold;
        text-align: center;
        text-decoration:none;
        padding: 0 0 0 9px;
}
</style>
</head>
<body>
<div id="menubar">
<div id="menu">
<ul>
 <li><a href="#">Irgendwas</a></li>
 <li><a href="#">Über uns</a></li>
 <li><a href="#">AGB</a></li>
 <li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
</body>
</html>

**Terry** · 27.02.2005, 18:30

Zitat von alexf812

hier mal der quelltext, nur ein problem, im FF sollte die breite von 100% durchgängig grau sein ist aber nur der streifen grau wo das menü ist...danke schon mal für einen tip.

" Wer float sagt, muß auch clear sagen" - gilt hier mal wieder.
Mit dem float nimmst du das Menü aus der normalen Positionierung raus und der umgebende Container wächst nicht mit.

Noch was: du mußt den floatenden Listenelementen zwingend eine width mitgeben - float braucht definitionsgemäß immer eine Breitenangabe und manche Browser (Opera z.B.) zeigen es ohne auch nicht korrekt an.

**alexf812** · 27.02.2005, 20:44

welches element muss ich den nda ein clear hinzufügen? ich habs schon probiert aber hat nix gebracht.

ja die breitenangabe habe ich rausgenommen, weil sonst die abstände zwischen den menüeinträgen so unterschiedlich gross sind, aber damit muss man wo dann leben??

**Boris** · 27.02.2005, 20:49

Ein sehr interessanter Artikel (besonders Punkt d) zu dem Thema hab ich heute gelesen:
http://www.sitepoint.com/blog-post-view.php?id=238086

Mit einem im Content gesetzten overflow:auto braucht man nichts mehr zu clearen in den meisten Fällen. Interessanter Trick, und er funktioniert auf allen Browsern.

**alexf812** · 27.02.2005, 20:57

hallo Boris,

hey das war genial der tip, genau was ich gesucht habe und funzt super. wär ich niemals drauf gekommen :-)

**Boris** · 27.02.2005, 21:15

Der Autor des Artikels auch nicht

**alexf812** · 27.02.2005, 21:23

habe halt nur noch das problem das ich für die breite der listenelemente einen festen wert angeben muss und somit die abstände der einträge nicht gleichmässig sind (also die abstände von wortende eines elements bis wortanfang nächstes element). terry sagte ja z.b. im opera wird sonst nix angezeigt

zur Startseite vom TP

Thema: horizontale liste im IE 5 mit hintergrundbild bzw. aufzählungszeichen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

horizontale liste im IE 5 mit hintergrundbild bzw. aufzählungszeichen

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

CSS-Only-Pulldown-Menü (mit JS-"Hilfsmotor" für IE)

[CSS] CSS Problem mit IE, FF funktioniert.....

Kleiner Fehler mit margin im IE 5

Cache Probleme mit IE im TP

Aktive Benutzer

Aktive Benutzer

Berechtigungen