Heiko: IE / Firefox Zeilenumbruch

Hallo, mein Problem ist das der IE 6 Zeilenumbrüche erzeugt (oder besser gesagt Abstände) und Firefox nicht (weder bei Win noch bei Mac).

Wenn ich den Code von:

<span id="nav">
<ul>
<li id="home"><a href="index.htm">______________</a></li>
<li id="info"><a href="index.htm">______________</a> </li>
</ul>
<ul id="nav2">
<li> <a href="rituale.htm">Rituale</a></li>
<li> <a href="demokratie.htm">Demokratie</a></li>
</ul>
</span>

nach:

<span id="nav">
<ul>
<li id="home"><a href="index.htm">______________</a></li><li id="info"><a href="index.htm">______________</a></li></ul>
<ul id="nav2"><li> <a href="rituale.htm">Rituale</a></li><li> <a href="demokratie.htm">Demokratie</a></li>
</ul>
</span>
ändere ist in beiden Browsern alles ok. Wie kommt es das die Schreibweise im HTML Code Einfluss auf die Darstellung hat, und wie lässt sich das verhindern?

  1. Hi,

    <span id="nav">
    <ul>

    ein span kann kein ul enthalten (weil ul ein blocklevel-Element ist und span ein non-replaced-inline-Element).
    Wozu dient das span? Die Id kannst Du auch dem ul zuweisen.

    Bei fehlerhaftem Code ist es unsinnig, über evtl. auftretende Darstellungsfehler nachzudenken.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Ok! Jedoch mit
      <div id="nav">
      <ul>
      ...

      ist der selbe Effekt da! span war ein offensichtlich falscher Reperaturversuch von mir.

  2. Hallo,

    Wie kommt es das die Schreibweise im HTML Code Einfluss auf die Darstellung hat

    Das ist einer der vielen Stellen, an denen die IE-Entwickler schlicht gepfuscht haben.

    und wie lässt sich das verhindern?

    Du hast es bereits selbst festgestellt: Du mußt einen Zeilenumbruch zwischen </li> und <li> vermeiden, erreichbar z.B. auch, indem Du den Zeilenumbruch auskommentierst.

    Falls Du jetzt denkst: "Was für ein Sch...!" Beschwerden bitte nach Redmond schicken...

    Der CSS-Code hat auch einen Einfluß. Wahrscheinlich hast Du da irgendwo ein display:block für die Links oder ein border? Genau weiß ich jetzt aber auch nicht mehr, wann diese seltsamen Abstände im IE genau auftreten. Lösche halt mal nach und nach die CSS-Deklarationen für diese Liste und für die Links, dann merkst Du, an welcher Stelle der IE diesen Murks baut.

    Viele Grüße
    Carsten

    1. Du hast richtig vermutet: Wenn ich das display: block aus der a: Deklaration entferne, ist der Effekt weg.Danke!

      1. Hallo,

        Du hast richtig vermutet: Wenn ich das display: block aus der a: Deklaration entferne, ist der Effekt weg.

        Ich hatte auch nochmal ein bißchen rumprobiert: Wenn man den Links mit display:block zusätzlich noch eine Breite gibt, verschwinden die Abstände auch wieder.

        Viele Grüße
        Carsten

        1. Hallo Carsten, super Tip! Mit

          #nav a {padding:0em 0em 1em 0em; text-decoration:none; color:white;font-size: 1em; display: block; width: 100%;}

          sind die überflüssigen Zeilenumbrüche weg. Siehe auch hier:

          http://www.connexin.de/test/v5A/test_ie_cssmen_4D.htm

          Thanks, Heiko

        2. Nur leider ein ziemliches geflackere im IE 6 (Win) (wobei das nur online auftritt, wenn ich die .htm Datei local lade, sieht auch im IE alles ok aus) während FF (Win) und Safari, IE 5.2 und FF auf dem Mac keine Probleme haben.
          Werde mich wohl von den hover-Effekten mit Graphik verabschieden müsssen. Hm!!!