Christoph Zurnieden: Der leidige NN4 *sigh*

Hallo zusammen,

wie immer, wenn der NN4 mit CSS zusammenprasselt geschieht etwas völlig unerwartetes (das stimmt nicht ganz) und schröckliches (das dafür umso mehr).

Ich habe ein einfaches DIV mit einer Reihe Links direkt im BODY (XHTML1-strict):

<div class="navioben">
<a href="link1.html"> Link1 </a>
<a href="link2.html"> Link2 </a>
<a href="link3.html"> Link3 </a>
<a href="link4.html"> Link4 </a>
<a href="link5.html"> Link5 </a>
</div>

(Egal was in .navioben{} steht, ändert nichts an folgendem Problem)

Nun stehen die Links zwar schön horizontal nebeneinander, wie das auch durchaus in meiner Absicht lag und auch so korrekt ist, nur ein wenig eng. Ich dachte mireigentlich  ein ".ankh {padding-left:2em;}" würde da behilflich sein, aber schon stehen die Dinger untereinander statt nebeneinander.
Ohne CSS und mit einigen zwischengestreuten   geht's zwar, reicht aber nicht und mehrere davon, ja schon der eine sind nicht Sinn und Zweck von CSS.
Es schmerzt mich, um ehrlich zu sein ;-)

Ginge das auch irgendwie anders (nein, eine Tabelle empfinde ich als noch schlimmer, bevor noch jemand auf diese Idee kommt ;-) und zwar in ordentlichem CSS?
Oder liegt der Fehler im XHTML1-strict?

so short

Christoph Zurnieden

  1. Hi!

    Versuch mal .ankh {margin-left: 2em;}
    (und nicht vergessen die Klasse auch an die Links zu basteln)

    Gruß Herbalizer

    1. hallo,

      Versuch mal .ankh {margin-left: 2em;}
      (und nicht vergessen die Klasse auch an die Links zu basteln)

      Das hast Du nicht ausprobiert, gelle? ;-)
      Auch sind Leerzeichen für den NN4 Gift, das tut man nicht.

      so short

      Christoph Zurnieden

  2. Moin!

    <div class="navioben">
    <a href="link1.html"> Link1 </a>
    <a href="link2.html"> Link2 </a>
    <a href="link3.html"> Link3 </a>
    <a href="link4.html"> Link4 </a>
    <a href="link5.html"> Link5 </a>
    </div>

    Nun stehen die Links zwar schön horizontal nebeneinander, wie das auch durchaus in meiner Absicht lag und auch so korrekt ist, nur ein wenig eng. Ich dachte mireigentlich  ein ".ankh {padding-left:2em;}" würde da behilflich sein, aber schon stehen die Dinger untereinander statt nebeneinander.

    Hm, da oben steht nirgendwo eine Klasse .ankh - ich kann nur raten, dass du die den Links zugewiesen hast: <a class="ankh"...>

    Und das kann leider gar nicht gut funktionieren. Links sind inline-Elemente. Die haben keine Eigenschaft padding. Wenn du Abstand haben willst, mußt du schon zu besseren Tricks greifen. Beispielsweise die Links ihrerseite in Blockelemente packen (dann hast du padding-Möglichkeiten), oder mit CSS-Angaben wie letter-spacing etc. arbeiten, die sich explizit auf inline-Elementinhalte beziehen.

    Würde ich jedenfalls mal so vermuten - man möge mich korrigieren, wenn ich Unsinn erzähle.

    - Sven Rautenberg

    1. Links sind inline-Elemente. Die haben keine Eigenschaft padding.

      Würde ich jedenfalls mal so vermuten - man möge mich korrigieren, wenn ich Unsinn erzähle.

      http://www.w3.org/TR/REC-CSS1#padding
      http://www.w3.org/TR/CSS2/box.html#propdef-padding
      http://www.w3.org/TR/CSS21/box.html#propdef-padding

    2. Hallo,

      Eigentlich bin ich ja nur wachgeworden, weil die alterschwache Blase drückte, aber was muß ich sehen? ;-)

      <div class="navioben">
      <a href="link1.html"> Link1 </a>
      <a href="link2.html"> Link2 </a>
      <a href="link3.html"> Link3 </a>
      <a href="link4.html"> Link4 </a>
      <a href="link5.html"> Link5 </a>
      </div>

      Nun stehen die Links zwar schön horizontal nebeneinander, wie das auch durchaus in meiner Absicht lag und auch so korrekt ist, nur ein wenig eng. Ich dachte mireigentlich  ein ".ankh {padding-left:2em;}" würde da behilflich sein, aber schon stehen die Dinger untereinander statt nebeneinander.

      Hm, da oben steht nirgendwo eine Klasse .ankh - ich kann nur raten, dass du die den Links zugewiesen hast: <a class="ankh"...>

      Ja, kommt vom C&P, war ja mal wieder klar, 'tschuldige bitte ;-)

      Und das kann leider gar nicht gut funktionieren. Links sind inline-Elemente. Die haben keine Eigenschaft padding.

      Wie der nette Linksetzer so richtig andeutete: das geht durchaus und offiziell bei allen Elementen.
      Das war das erste, was ich nachgeschaut hatte. Ich hatte schon einmal hier eine besonders bescheuerte Frage gestellt und schaue seitdem doppelt und dreifach nach ;-)

      Wenn du Abstand haben willst, mußt du schon zu besseren Tricks greifen. Beispielsweise die Links ihrerseite in Blockelemente packen (dann hast du padding-Möglichkeiten),

      Hmm, und dann mit display:inline wieder auf Vordermann bringen?
      Moment...

      <div class="navioben">
      <div style="display:inline;padding-left:2em;"><a href="link.html"> link </a></div>
      <div style="display:inline;padding-left:2em;"><a href="link.html"> link </a></div>
      <div style="display:inline;padding-left:2em;"><a href="link.html"> link </a></div>
      </div>

      So, ja? Dann zeigt er gar nichts mehr an, aber da ich einen Rahmen um navioben gezogen habe, sehe ich, das er die unsichtbaren Links doch wieder untereinander plaziert hat.

      Nein, so schon mal nicht. Wäre ja auch zu schön gewesen ;-)

      Nun gut, wenn keinem anderem etwas einfälllt, muß ich das wohl unter NN4 abbuchen und damit leben.
      Trotzdem und auf jeden Fall erstmal: Danke.

      so short

      Christoph Zurnieden

  3. Hi Christoph,

    wie immer, wenn der NN4 mit CSS zusammenprasselt geschieht etwas völlig unerwartetes (das stimmt nicht ganz) und schröckliches (das dafür umso mehr).

    vergiss Netscape 4, wenn es um jedwede Positionierung geht, die nicht absolut ist bzw. mit relative/margin/padding zu tun hat.

    http://css.nu/pointers/bugs-nn.html
     http://richinstyle.com/bugs/netscape4.html

    <div class="navioben">

    ^^^^^
    Warum keine id? Die Navigation sollte eindeutig sein, ist sie das nicht, würde ich das Konzept der Seitengestaltung überdenken ;)

    <a href="link1.html"> Link1 </a>

    ^     ^
    Die (ungeschützten) Leerzeichen kannst du weglassen, sie werden ohnehin ignoriert.

    Nun stehen die Links zwar schön horizontal nebeneinander, wie das auch durchaus in meiner Absicht lag und auch so korrekt ist, nur ein wenig eng. Ich dachte mireigentlich ein ".ankh {padding-left:2em;}" würde da behilflich sein, aber schon stehen die Dinger untereinander statt nebeneinander.

    Das ist leider richtig und trifft auf alle möglichen Angaben von padding (sowie margin) zu. Nichtmal mit einem expliziten display:inline lässt sich das wieder gutmachen.

    Es schmerzt mich, um ehrlich zu sein ;-)

    [http://selfaktuell.teamone.de/tippstricks/css/browserweiche/] und basta.

    Ginge das auch irgendwie anders (nein, eine Tabelle empfinde ich als noch schlimmer, bevor noch jemand auf diese Idee kommt ;-) und zwar in ordentlichem CSS?

    Der einzige Workaround ist absolute Positionierung, aber das wäre Overkill und ich würde das auch nicht als "ordentliches CSS" bezeichnen ;)

    Oder liegt der Fehler im XHTML1-strict?

    Nein, (X)HTML kann die Kröte relativ gut.

    LG Orlando

    1. Hallo,

      Wer hat denn da heute Mittag den Server wieder kaputtgefummelt? Ha? ;-)
      So komme ich erst jetzt zum Antworten.

      wie immer, wenn der NN4 mit CSS zusammenprasselt geschieht etwas völlig unerwartetes (das stimmt nicht ganz) und schröckliches (das dafür umso mehr).

      vergiss Netscape 4, wenn es um jedwede Positionierung geht, die nicht absolut ist bzw. mit relative/margin/padding zu tun hat.

      Man kann's ja immerhin versuchen, oder? ;-)

      http://css.nu/pointers/bugs-nn.html
      http://richinstyle.com/bugs/netscape4.html

      Ah, gute Quellen, danke!

      <div class="navioben">
              ^^^^^
      Warum keine id? Die Navigation sollte eindeutig sein, ist sie das nicht, würde ich das Konzept der Seitengestaltung überdenken ;)

      Ich bin ein Freund des Recyclings und eine ID kann man nunmal nur einmal gebrauchen.
      Außerdem sind es Javascript-freie Seiten, da brauche ich nichts anzusprechen.
      Gut, das ist ein merkwürdiges Argument, aber ist wohl meine Handschrift, sprich: typisch für mich ;-)

      <a href="link1.html"> Link1 </a>
                              ^     ^
      Die (ungeschützten) Leerzeichen kannst du weglassen, sie werden ohnehin ignoriert.

      Vor der Veröffentlichung läuft da eh noch ein Sedskript drüber, das alle unnötigen Leerzeichen und Zeilenumbrüche entfernt. War nur zwecks besserer Übersicht.

      Nun stehen die Links zwar schön horizontal nebeneinander, wie das auch durchaus in meiner Absicht lag und auch so korrekt ist, nur ein wenig eng. Ich dachte mireigentlich ein ".ankh {padding-left:2em;}" würde da behilflich sein, aber schon stehen die Dinger untereinander statt nebeneinander.

      Das ist leider richtig und trifft auf alle möglichen Angaben von padding (sowie margin) zu. Nichtmal mit einem expliziten display:inline lässt sich das wieder gutmachen.

      Das ist genau das, was ich zwar befürchtet hatte aber nicht wahrhaben wollte ;-)

      Es schmerzt mich, um ehrlich zu sein ;-)

      [http://selfaktuell.teamone.de/tippstricks/css/browserweiche/] und basta.

      Die ist schon drin, sonst würde so einiges andere nicht funktionieren. ;-)
      (Die Defaultschriftgröße beim Unix NN4 ist z.B. sehr klein, die habe ich vergrößert -prozentual natürlich - und dann nachher für alle anderen wieder auf 100% gesetzt und so Kleinigkeiten mehr)

      Ich weiß zwar nicht, wer als erstes die Idee mit dem "@media all" hatte, aber es sei ihm auf Knien dafür gedankt!

      Ginge das auch irgendwie anders (nein, eine Tabelle empfinde ich als noch schlimmer, bevor noch jemand auf diese Idee kommt ;-) und zwar in ordentlichem CSS?

      Der einzige Workaround ist absolute Positionierung, aber das wäre Overkill und ich würde das auch nicht als "ordentliches CSS" bezeichnen ;)

      Nein, absolute Positionierung kommt _überhaupt_ nicht in die Tüte, das ist eine Firmenseite im Web, keine Intranetpuplikation. Das muß in allen Browsern gut(!) lesbar sein und am besten noch gut aussehen.
      In der Reihenfolge, da es ein verständiger Kunde ist ;-)

      Oder liegt der Fehler im XHTML1-strict?
      Nein, (X)HTML kann die Kröte relativ gut.

      Würde mich beruhigen, wenn nicht dieses kleine Wörtchen "relativ" dort stünde.

      Aber Du hast mir ja zwei gute Links gegeben, die werde ich mir mal in Ruhe zu Gemüte führen.

      mit herzlichem Dank

      Christoph Zurnieden

  4. Hi,

    wie immer, wenn der NN4 mit CSS zusammenprasselt geschieht etwas völlig unerwartetes (das stimmt nicht ganz) und schröckliches (das dafür umso mehr).

    tja, der NN4 macht halt moderne Kunst, und Du solltest so klug sein, sie teuer zu verkaufen ,-)

    Gruß, Andreas

    1. Hallo,

      wie immer, wenn der NN4 mit CSS zusammenprasselt geschieht etwas völlig unerwartetes (das stimmt nicht ganz) und schröckliches (das dafür umso mehr).

      tja, der NN4 macht halt moderne Kunst, und Du solltest so klug sein, sie teuer zu verkaufen ,-)

      Ja, wenn's so wäre, ist aber für den berühmt berüchtigten "feuchtwarmen Händedruck" ;-)
      (Aber ich mach's gerne, kommt halt nur drauf an, wer fragt)

      so short

      Christoph Zurnieden