Listen mit Separator

[miguel_rkc]

Hallo,
ich möchte ein Menü (ungeordnete Liste) mit Seperatoren gestalten. Es soll prinzipiell so aussehen:

Link 1
-----------------
Link 2
-----------------
Link 3
-----------------
Link 4 

Die gestrichelten Linien sollen die Seperatoren darstellen, die ich mittels <hr /> realisieren möchte, ALLERDINGS wird die Darstellung im IE dadurch total seltsam: die Höhe der <li> bzw. <a>-Bereiche ist deutlich größer als in allen anderen Browsern!!! Warum ist das so, wie kann ich das verhindern? Gibt es andere sinnvolle (semantische) Lösungen für solche Seperatoren?

<ul>
  <li><a href="" title="">Link 1 </a></li>
  <li><hr /></li>
  <li><a href="" title="">Link 2 </a></li>
  <li><hr /></li>
  <li><a href="" title="">Link 3 </a></li>
  <li><hr /></li>
  <li><a href="" title="">Link 4 </a></li>
</ul> 

ul { margin: 0; padding:0; list-style-type:none; }
li { margin:0; padding:0; }
li a { display:block; padding:2px; background:#ddd; width:99%; }
li hr { height:1px; border:0; color:#333; background:#333; margin:0; padding:0; } 

[derHund]

Re: Listen mit Separator

Warum ist das so, wie kann ich das verhindern? Gibt es andere sinnvolle (semantische) Lösungen für solche Seperatoren?

- IE eben ^^
- verhindern kannst dus per

* html ul#dein_menu a {
  height : 1%;
}

viel schöner ist imho ohne hr, einfach nur per border ... (problem tritt auch dort auf).

[Kropff]

warum diese krücke mit <hr>?

li
{
   padding-bottom: 5px;
   border-bottom: 1px dashed #000;
} 

gruß
peter

[Quetschi]

ich glaub der IE würd auf diese zu großen Abstände verzichten, wenn man im Quelltext keine Umbrüche macht - aber wer will das schon, den Quelltext kannst dann ja kaum (eigentlich gar nicht mehr) noch lesen

OffTopic:

---

Das ist das schöne wenn man DOM in PHP nutzt um das html zu erzeugen - such ich nen fehler oder so im Quelltext dann
$dom->formatOutput = true;
stimmt das html und es geht ans Layout:
$dom->formatOutput = false;

---

[RanzigeMilch]

an deiner stelle würd ich divs nehmen die ne border-bottom haben

hrs stinken mal extrem in nem menü

[miguel_rkc]

Ok, dann werde ich es wohl mit div's machen... nicht schön, aber einfach

Danke!

@Kropff: ich will nach dem letzten Menüitem kein border-bottom haben und auch keine .first/.last-Klassen verwenden, sonst wär deine Möglichkeit natürlich die günstigste

[Quetschi]

Original geschrieben von RanzigeMilch
an deiner stelle würd ich divs nehmen die ne border-bottom haben

hrs stinken mal extrem in nem menü

Das sowieso - aber ich dachte dass muss ich nicht nochmal erwähnen

EDIT:
jetzt seh ichs erst - warum nochmal divs da drin? - reicht doch völlig im li oder a-Tag je nachdem

[Quetschi]

Original geschrieben von miguel_rkc
@Kropff: ich will nach dem letzten Menüitem kein border-bottom haben und auch keine .first/.last-Klassen verwenden, sonst wär deine Möglichkeit natürlich die günstigste

Was spricht da dagegen?

Stell dir vor, du hast später mal ne Designänderung und willst keine Trennlinien mehr haben - dann kannst sämtlichen Quellcode durchgehen und die hr's rausschmeissen (oder die Divs deren Sinn ich ned versteh) - so müsstest nur aus deinem CSS die Border-Eigenschaft abändern - fertig.

[miguel_rkc]

Original geschrieben von Quetschi
Was spricht da dagegen?

Stell dir vor, du hast später mal ne Designänderung und willst keine Trennlinien mehr haben - dann kannst sämtlichen Quellcode durchgehen und die hr's rausschmeissen (oder die Divs deren Sinn ich ned versteh) - so müsstest nur aus deinem CSS die Border-Eigenschaft abändern - fertig.

Damit hast du natürlich auch wieder recht... Kommando zurück und ab in den Feierabend Danke nochmal.

[Quetschi]

Alles klar - kostet ein Feierabendbier

[RanzigeMilch]

also mit divs meinte ich erst gar keine liste zu benutzen
da kann man denn so schön per css mi background bei hover usw arbeiten
also in verbindung mit css eigentlich der bequemste weg und es schaut gut aus (wenn man des style-sheet net komplett aus der tonne geholt hat)

[wahsaga]

Original geschrieben von RanzigeMilch
also mit divs meinte ich erst gar keine liste zu benutzen

Ist ja Unfug.
Eine Navigation ist eine Auflistung von Links.

[RanzigeMilch]

hmpf nur weils ne auflistung ist muss mans net als liste dastellen...
worauf aber glaube ich alle hinauswollen ist, daß er n ordentliches stylesheet anlegen soll

[wahsaga]

Original geschrieben von RanzigeMilch
hmpf nur weils ne auflistung ist muss mans net als liste dastellen...

Kommt drauf an, ob man HTML strukturell sinnvoll nutzen will - oder nur irgendwelchen Quark erstellen will, der mit HTML syntaktische Ähnlichkeit besitzt, semantisch aber Unfug ist.

worauf aber glaube ich alle hinauswollen ist, daß er n ordentliches stylesheet anlegen soll

Worauf ich hinaus will ist, dass CSS auf semantisch sinnvollem HTML aufsetzt. Ohne das kannst du es gleich in die Tonne kloppen.

[miguel_rkc]

...semantisch ist eine horizontale Abgrenzung mittels <hr />, so wie ich es ursprünglich vor hatte, wohl das sinnvollste. Funktioniert nur leider wegen dem IE nicht