HTML: Listen-Einträge auf gleicher Höhe mit Symbol

[CalganX]

Hi,
ich habe mir für eine einfache unsortierte Liste in HTML ein Stylesheet gebastelt, das dem Listen-Eintrag statt dem Punkt ein GIF zuordnet:

Code:

.ulNav {
   list-style-image: url(../images/bullet.gif);
   list-style-position: outside;
   line-height: 25px;
   padding-left: 10px;
   margin-left: 10px;
}

Im Firefox sieht das auch soweit korrekt aus (o sei jetzt mal das Bild bullet.gif):

Code:

o Text

Also auf gleicher Höhe das ganze. Soweit auch richtig. Aber im Internet Explorer sieht das ungefähr so aus:

Code:

o
  Text

Also versetzt. Zwar keine ganze Zeile, aber genügend, damit ist beschissen aussieht. :?

Hat jemand eine Idee, was man da machen kann, damit auch der IE versteht, dass er das machen soll, wie der FF?

Chris

[Matze]

Dein Quellcode muss in html so aussehen (Beispiel):

Code:

<td>[img]...[/img]</td>

nicht untereinander, da der IE das sonst falsch parst und Abstände einfügt. DIe Logik kann man zwar nicht verstehen, ist aber so.

Kann es sein, dass das bei dir irgendwie der Fall ist? Wie das mit css genau ist, weiß ich nämlich nicht.

[CalganX]

Hi Matze,
es geht aber nicht um eine Tabelle, sondern um eine einfache Liste... ;)
Die sieht dann zum Beispiel so aus:

Code:

<ul class="ulNav">[*]Eintrag 1 [*]Eintrag 2 [/list]

Wobei mir aufgefallen ist, dass das Problem nicht besteht, wenn ich das CSS-Attribut line-height rausnehmen würde. Allerdings ist die Liste dann zusammen gequetscht und ich hätte gerne ein wenig Platz zwishcen den verschiedenen Listen-Einträgen. :?

Chris

[jfheins]

Sonst probier doch mal, statt nur dem Aufzählungszeichen, in dem Bild noch ein paar transparente Pixel oben dranzuklatschen ...

[CalganX]

Hi,
dann sieht es aber ziemlich bescheiden im Firefox aus... :(

Chris

[mh166]

Probiers mal mit folgenden Modifikationen:

Code:

.ulNav {
   background-image: url(../images/bullet.gif);
   background-position: left center;
   background-repeat: no-repeat;
   list-style-type:none;
   line-height: 25px;
   padding-left: 10px; //Padding-left der Breite des Bullet anpassen!!!
   margin-left: 10px;
}

mfg, mh166

[CalganX]

Hi,
so funktionierte es nicht ganz, weil immer nur ein Bild pro Liste zu sehen war, aber ich hab ein wenig rumgespielt und jetzt funktioniert es. :)

Danke für den Tipp mit dem Hintergrundbild. ;)
Chris

[Matze]

Zitat:

Zitat von Chakotay1308

[...] aber ich hab ein wenig rumgespielt und jetzt funktioniert es. :)

Was hast du denn genau verändert?

Btw: Nicht vergessen, den Status der offenen Frage zu entfernen. ;)

[CalganX]

Hi,
im Prinzip habe ich das Hintergrundbild statt auf die ganze Liste nur auf die einzelnen Items angewendet. Und alle anderen Eigenschaft auf der ganzen Liste behalten. ;)

Ich stelle den Code gerne rein, allerdings ist das ganze auf dem Laptop und ich bin gerade zu faul und zu müde das jetzt rüberzukopieren. *gähn* ;)

Chris

[mh166]

Zitat:

Zitat von Chakotay1308

im Prinzip habe ich das Hintergrundbild statt auf die ganze Liste nur auf die einzelnen Items angewendet.

Mist! Stimmt, hatte nich mehr dran gedacht, dass diese Class für den Container statt für die Items war.

Also isses jetzt sicherlich sowas, nhem ich an:

Code:

.ulNav li { ... }

mfg, mh166