David Greminger: menü mit <div> und css formatiert

Hallo!

Habe folgendes problem: für einmal interpretiert der IE das Boxmodell richtig, was ich selber fast nicht glauben kann!?!

zu sehen hier: http://ridomon.skatepark-weinfelden.ch
(bitte einmal mit IE und einmal mit FF ausprobieren!)

das menü wird im IE korrekt dargestellt, so wie ich's eigentlich will.

jedoch streikt der FF. kann mir wer sagen, an was das liegt! hab nun schon stunden mein css analysiert, aber weiss nicht mehr weiter...

Link zur css-datei: http://ridomon.skatepark-weinfelden.ch/css/ridomon.css

Meine FF-Version: 1.5.0.1
Meine IE-Version: 6.0.2900.2180

Vielen dank jetzt schon für jegliche Hilfen!:)

Gruss dave

-------------------------
hier noch der HTML-code:
--------

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<title>ridomon.ch&nbsp;@&nbsp;home</title>

<link rel="stylesheet" type="text/css" href="css/ridomon.css" />

</head>

<body>

<div id="page">

<!-- Container Links mit Bild -->
<div id="left">
</div>

<!-- Menüleiste oben -->
<div id="menu">
<div class="menu_off"> <a href="#">link1link1</a> </div>
<div class="menu_off"> <a href="#">link2</a> </div>
<div class="menu_off"> <a href="#">link3link3</a> </div>
<div class="menu_off"> <a href="#">link4</a> </div>
</div>

<!-- Content Mitte -->
<div id="middle">
<p>welcome on ridomon.ch!</p>
</div>

</div>

</body>

</html>

  1. Hallo David,

    Habe folgendes problem: für einmal interpretiert der IE das Boxmodell richtig, was ich selber fast nicht glauben kann!?!

    Nööö ... mit der xml-Deklaration am Anfang schickst du den ie in den Quirksmod, dann ignoriert er einfach die Fehler ;-)

    jedoch streikt der FF. kann mir wer sagen, an was das liegt! hab nun schon stunden mein css analysiert, aber weiss nicht mehr weiter...

    Dein CSS enthält display: block; und sonstige Ungereimtheiten.

    Beste Grüsse aus dem Emmental
    Richard

  2. Hi,

    für einmal interpretiert der IE das Boxmodell richtig,

    das halte ich für ein Gerücht, zumal Du ihn in den Quirks-Mode geschickt hast. Vermeide dies.

    (bitte einmal mit IE und einmal mit FF ausprobieren!)

    Ich habe hier nur IE 5.0. Meinst Du den?

    hab nun schon stunden mein css analysiert, aber weiss nicht mehr weiter...

    Warum hast Du trotz einer umfangreichen Analyse noch immer keine sinnvolle HTML-Struktur gefunden? Eine Liste(!) von Links mit etwas anderem als einem der verfügbaren Listenelemente zu strukturieren ist jedenfalls kaum besonders weise.

    Link zur css-datei: http://ridomon.skatepark-weinfelden.ch/css/ridomon.css

    Das ist kein Link, sondern eine URL. Ein Link ist beispielsweise dies.

    Vielen dank jetzt schon für jegliche Hilfen!:)

    Gerne. Allerdings musst Du schon Dein Problem beschreiben, nicht einfach nur "'s funzt net" anders formulieren. Da Du Dein Problem stundenlang analysiert hast, sollte Dir das nicht schwer fallen.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Wenn Du der Ansicht bist, der IE sei ein beachtenswerter Browser, ist XHTML/1.1 nicht der DOCTYPE Deiner Wahl.

    <div id="left">

    Ist das etwas, was übrig ist? Andernfalls ist "left" ein Bezeichner, der in HTML schwerlich vorkommen kann.

    </div>

    Inhaltsleere Elemente sind sinnleere Elemente.

    <div class="menu_off"> <a href="#">link1link1</a> </div>
    <div class="menu_off"> <a href="#">link2</a> </div>
    <div class="menu_off"> <a href="#">link3link3</a> </div>
    <div class="menu_off"> <a href="#">link4</a> </div>

    Dies ist erstens wie gesagt eine Liste, und zweitens kann keine dieser Klassen richtig sein, da _alle_ gleichartigen Elemente des Bereichs sie besitzen - und zwar offenbar bewusst.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hello out there!

      Wenn Du der Ansicht bist, der IE sei ein beachtenswerter Browser, ist XHTML/1.1 nicht der DOCTYPE Deiner Wahl.

      Dass XHTML 1.1 praktisch eher schadet als nutzt ist klar. Aber was hat das mit dem IE zu tun?

      <div id="left">
      Ist das etwas, was übrig ist? Andernfalls ist "left" ein Bezeichner, der in HTML schwerlich vorkommen kann.

      @David: Was Cheatah damit meint, erfährst du in Use class with semantics in mind.

      <div class="menu_off"> <a href="#">link1link1</a> </div>
      <div class="menu_off"> <a href="#">link2</a> </div>
      <div class="menu_off"> <a href="#">link3link3</a> </div>
      <div class="menu_off"> <a href="#">link4</a> </div>

      Dies ist erstens wie gesagt eine Liste, und zweitens kann keine dieser Klassen richtig sein, da _alle_ gleichartigen Elemente des Bereichs sie besitzen - und zwar offenbar bewusst.

      Und drittens bietet CSS nicht nur Klassenselektoren, sondern auch Nachfahrenselektoren, mit denen sich diese Listenpunkte (wenn es denn welche werden sollten!) selektieren lassen. Hilfreich dazu könne es sein, dem Elternelement (was dann nicht div, sondern ul oder ol ist) eine ID zu geben, evtl. auch eine Klasse.

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      1. Moin,

        Und drittens bietet CSS nicht nur Klassenselektoren, sondern auch Nachfahrenselektoren, mit denen sich diese Listenpunkte (wenn es denn welche werden sollten!) selektieren lassen. ...

        Wenn ich mich nicht irre, gibt es aber (einen) Browser (IE<6), der Nachfahrenselektoren nur unzureichend unterstüzt?
        Holte man sich damit nicht zwangsläufig wieder ein anderes Problem ins CSS?

        Gruß
        Ulrich

        1. Hi,

          Wenn ich mich nicht irre, gibt es aber (einen) Browser (IE<6), der Nachfahrenselektoren nur unzureichend unterstüzt?

          ja, sogar mehrere. Um nur zwei zu nennen: IE 2 und Netscape 3. Beide unterstützen übrigens gar kein CSS, nicht mal etwas Ähnliches.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Moin,

            ja, sogar mehrere. Um nur zwei zu nennen: IE 2 und Netscape 3. Beide unterstützen übrigens gar kein CSS, nicht mal etwas Ähnliches.

            Und IE 5.5 (immer noch recht verbreitet), der kann das?

            mfG
            Ulrich

            1. Hi,

              Und IE 5.5 (immer noch recht verbreitet), der kann das?

              AFAIK kann es schon der IE 3. Ich lasse mich diesbezüglich aber gern eines besseren belehren.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
              1. Moin,

                mein Fehler, Du hast Recht. Ich hatte das eigentliche Problem falsch verstanden.

                mfG
                Ulrich

        2. Hello out there!

          Wenn ich mich nicht irre, gibt es aber (einen) Browser (IE<6), der Nachfahrenselektoren nur unzureichend unterstüzt?

          Du verwechselst nicht gerade Nachfahrenselektoren mit Kindselektoren?

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      2. Hi,

        Dass XHTML 1.1 praktisch eher schadet als nutzt ist klar. Aber was hat das mit dem IE zu tun?

        erstens ist es AFAIK derjenige Browser, der am meisten unter XHTML/1.1 versagt, zweitens ist der IE aus irgend welchen Gründen immer noch das am ehesten ziehende "Argument", um von etwas Unsinnigen abzuraten.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hello out there!

          Dass XHTML 1.1 praktisch eher schadet als nutzt ist klar. Aber was hat das mit dem IE zu tun?

          erstens ist es AFAIK derjenige Browser, der am meisten unter XHTML/1.1 versagt,

          Wie sollte der IE da versagen, wo sich doch XHTML 1.0 Strict und XHTML 1.1 fast gleichen? (bis auf weggefallenes lang-Attribut, hinzugekommene Ruby-Annotation, anderer Typ bei Imagemaps u.a. Kleinigkeiten)

          zweitens ist der IE aus irgend welchen Gründen immer noch das am ehesten ziehende "Argument", um von etwas Unsinnigen abzuraten.

          :-) Vor allem von sich selbst.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. hi,

            erstens ist es AFAIK derjenige Browser, der am meisten unter XHTML/1.1 versagt,

            Wie sollte der IE da versagen, wo sich doch XHTML 1.0 Strict und XHTML 1.1 fast gleichen? (bis auf weggefallenes lang-Attribut, hinzugekommene Ruby-Annotation, anderer Typ bei Imagemaps u.a. Kleinigkeiten)

            XHTML 1.1 erfordert m.W. zwingend die Auslieferung unter einem XML-gerechten Content-type (application/xhtml+xml o.ä.) - und was der IE mit solchen Ressourcen macht, sollte ja bekannt sein: Er zeigt lediglich eine Baumdarstellung der XML-Struktur an.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hello out there!

              XHTML 1.1 erfordert m.W. zwingend die Auslieferung unter einem XML-gerechten Content-type (application/xhtml+xml o.ä.)

              Nein, eben nicht zwingend. Die Spec sagt, es SOLLTE als application/xhtml+xml ausgeliefert werden.

              D.h. unter gewissen Umständen (wenn bspw, keine Imagemaps verwendet werden) KANN XHTML 1.1 auch als text/html ausgeliefert werden.

              Diese Einschränkungen, die XHTML 1.1 als text/html mit sich bringt, sind ja auch ein Grund dafür, warum hier im Forum immer wieder (und da misch ich auch mit) von der Verwendung von XHTML 1.1 abgeraten wird.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
            2. Hallo wahsaga.

              XHTML 1.1 erfordert m.W. zwingend die Auslieferung unter einem XML-gerechten Content-type (application/xhtml+xml o.ä.)

              Wobei sich der IE bei text/xml nicht quer stellt. Bei application/xhtml+xml droht er sogar, die angefragte Ressource herunterzuladen.
              Nachteil bei text/xml: es gibt keine Links, da es so etwas nur in (X)HTML, jedoch nicht in reinen XML-Dokumenten gibt.

              • und was der IE mit solchen Ressourcen macht, sollte ja bekannt sein: Er zeigt lediglich eine Baumdarstellung der XML-Struktur an.

              Dagegen kann man mit einem Stylesheet wirken, welches dann aber wohl eher per XML-Verarbeitungsanweisung eingebunden werden sollte. Nachteil hier: es gibt keinerlei Browservorgaben bzgl. Layout, man muss jede Kleinigkeit selbst angeben.

              Einen schönen Dienstag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              mathbr:del.icio.us/ mathbr:w00t/
              1. Hello out there!

                Nachteil bei text/xml: es gibt keine Links, da es so etwas nur in (X)HTML, jedoch nicht in reinen XML-Dokumenten gibt.

                Wie kommst’n darauf?

                http://www.w3.org/TR/xlink/

                <?xml-stylesheet type="text/css" href="#style"?>  
                <foo xmlns:xlink="http://www.w3.org/1999/xlink">  
                  <style xml:id="style">  
                [code lang=css]    foo {  
                      display: block;  
                    }  
                    style {  
                      display: none;  
                    }  
                    bar {  
                      display: inline;  
                    }
                

                </style>
                  <bar xlink:type="simple" xlink:href="http://example.net">quz</bar>
                </foo>[/code]

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                1. Hallo Gunnar.

                  Nachteil bei text/xml: es gibt keine Links, da es so etwas nur in (X)HTML, jedoch nicht in reinen XML-Dokumenten gibt.

                  Wie kommst’n darauf?

                  http://www.w3.org/TR/xlink/

                  OK, XLink war mir gerade entfallen. Aber funktionstüchtig (im Sinne von Click and Go) ist es in keinem mir zur Verfügung stehenden Browser.

                  Einen schönen Dienstag noch.

                  Gruß, Ashura

                  --
                  sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                  mathbr:del.icio.us/ mathbr:w00t/
                  1. Hello out there!

                    OK, XLink war mir gerade entfallen. Aber funktionstüchtig (im Sinne von Click and Go) ist es in keinem mir zur Verfügung stehenden Browser.

                    Wie kommst’n darauf?

                    Das gezeigte Beispiel funktioniert problemlos im Firefox 1.5.

                    See ya up the road,
                    Gunnar

                    --
                    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                    1. Hallo Gunnar.

                      Das gezeigte Beispiel funktioniert problemlos im Firefox 1.5.

                      Hm, vielleicht habe ich es nicht ganz verstanden.
                      Einmal als Beispiel meine Navigation:

                      <ul id="navigation" xmlns:xlink="http://www.w3.org/1999/xlink">  
                        <li><span title="Alle Neuigkeiten auf einen Blick">Start</span></li>  
                        <li xlink:type="simple" xlink:href="/Artikel">Artikel</li>  
                        <li><a href="/Galerie">Galerie</a></li>  
                        <li><a href="/Links">Links</a></li>  
                        <li><a href="/Ashura">Ashura</a></li>  
                        <li><a href="/Gaestebuch">Gästebuch</a></li>  
                        <li><a href="/Impressum">Impressum</a></li>  
                      </ul>
                      

                      Muss der Namensraum zwangsläufig im root-Element angegeben werden? (Ich schätze nein, da ich ja ansonsten den XHTML-Namensraum dort nicht angeben könnte.)

                      Einen schönen Dienstag noch.

                      Gruß, Ashura

                      --
                      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                      mathbr:del.icio.us/ mathbr:w00t/
                      1. Hello out there!

                        Muss der Namensraum zwangsläufig im root-Element angegeben werden?

                        Nein.

                        Ich schätze nein,

                        Ja. ;-)

                        da ich ja ansonsten den XHTML-Namensraum dort nicht angeben könnte.

                        Nein. Wieso solltest du das nicht können?

                        <html  
                          xmlns="http://www.w3.org/1999/xhtml"  
                          xmlns:xlink="http://www.w3.org/1999/xlink"  
                        
                        >
                        
                        

                        Du kenst SELFHTML? ;-) <http://de.selfhtml.org/xml/regeln/namensraeume.htm#namensraeume_gleichzeitig@title=Mehrere Namensräume gleichzeitig verwenden>

                        Namensräume in XML (Deutsche Übersetzung)

                        Und nur am Rande: Wenn du da XLink-Zeugs in XHTML einbaust, ist das zwar wohlgeformtes XML, aber natürlich kein valides XHTML mehr.

                        See ya up the road,
                        Gunnar

                        --
                        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                        1. Hallo Gunnar.

                          da ich ja ansonsten den XHTML-Namensraum dort nicht angeben könnte.

                          Nein. Wieso solltest du das nicht können?

                          <html

                          xmlns="http://www.w3.org/1999/xhtml"
                            xmlns:xlink="http://www.w3.org/1999/xlink"

                            
                          Ah, diese Notation war mir bisher noch nicht vertraut, danke.  
                            
                          
                          > Du kenst SELFHTML? ;-) <http://de.selfhtml.org/xml/regeln/namensraeume.htm#namensraeume_gleichzeitig@title=Mehrere Namensräume gleichzeitig verwenden>  
                            
                          Ja, schon mal davon gehört. (In dieses Kapitel bin ich mangels Bedarf noch nicht vorgedrungen.)  
                            
                          
                          > Und nur am Rande: Wenn du da XLink-Zeugs in XHTML einbaust, ist das zwar wohlgeformtes XML, aber natürlich kein valides XHTML mehr.  
                            
                          Ja, ist mir bewusst. Zudem muss ich den XHTML-Namensraum entfernen, damit der XLink aktiv wird. (Damit zerfällt zwar das Layout¹, aber der XLink wird im Firefox tatsächlich anklickbar.)  
                            
                            
                          Einen schönen Dienstag noch.  
                            
                          Gruß, Ashura  
                          
                          -- 
                          ¹ Im Opera merkwürdigerweise nicht.  
                            
                          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
                          [<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)
                          
    2. Hallo.

      zumal Du ihn in den Quirks-Mode geschickt hast. Vermeide dies.

      Es gibt hinreichend gute Gründe, genau das nicht zu tun.
      MfG, at