Joachim Dippold: netscape und css geht trotz validierung nicht

hallo Gemeinde,

ich habe mir wirklich mühe gegeben und sowohl die shtml-datei und auch das dazugehörige css-datei langwierig gesäubert und von meinen jugendsünden befreit..*grin*...trotzdem wird seit der validierung die HP in netscape komplett entstellt dargestellt....nun bin ich echt verwirrt:

VOR der validierung mit unsauberem shtml und teilweise sogar nicht standardisierter syntax ging die seite auch auf netscape...zwar mit total falschen farben aber zumindest mit richtigem layout...jetzt passt zwar der code aber das layout nicht...

kann mir vielleicht bitte jemand mal erklären WAS ich ändern muss, damit in NN die seite zumindest ähnlich wie in IE aussieht.....bin für wirkungsvolle hinweise dankbar

hier der inhalt der CSS:

@charset "iso-8859-1";
.taste {letter-spacing:3pt;
font-family:courier;
}
#menu {
position:absolute;
top: 10px;
left:10px;
color:#D0CFC0;
width:150px;
background:#5F78BF;
padding:5px;
border:medium outset #6078BF;
}
#menu a{
color:#FFFFFF;
font-family:sans-serif;
margin:5px 0 5px 0;
padding:1px 3px 1px 4px;
text-decoration:none;
cursor:pointer;
background:#304F80;
display:block;
border:medium outset #6078BF;
width:140px;
}
#menu a:hover{
font-family:sans-serif;
color:#D0CFC0;
cursor:pointer;
background:#2F375F;
border:medium inset #6E89DB;
}
.liste{
list-style-type:none;
margin:0px;
padding:0px;
}
#topbar {
position:absolute;
top: 10px;
left:190px;
margin:0px;
padding:0px;
color:#D0CFC0;
background:#5F78BF;
padding:7px;
border:medium outset #6078BF;
}
#topbar a{
color:#FFFFFF;
font-family:sans-serif;
margin:5px 0px 5px 5px;
padding:1px 3px 1px 4px;
text-decoration:none;
cursor:pointer;
background:#304F80;
border:medium outset #6078BF;
width:140px;
}
#topbar a:hover{
font-family:sans-serif;
color:#D0CFC0;
cursor:pointer;
background:#2F375F;
border:medium inset #6E89DB;
}
#start {
margin: 50px 2% 0px 180px;
background:#5F78BF;
padding:0em 1em 1em 1em;
border-style:outset;
border-color:#5F78BF;
border-width:4px;
color:#000000;
width:450px;
}
#inhalt {
margin: 50px 2% 0px 180px;
background:#5F78BF;
padding:1em 2em;
border-style:outset;
border-color:#5F78BF;
border-width:4px;
color:#000000;
}
body {
background-image:url(-);
font-family:sans-serif;
background-color:#000033;
font-weight:normal;
color:#ffffff;
text-decoration:none;
}
img {
border-style:outset;
border-color:#FFFFFF;
}
.no {
border-width:0px;
}
table {
background-color:#5F78BF;
border-style:outset;
border-color:#5F78BF;
border-width:4px;
color:#000000;
}
p {
font-family:sans-serif;
background-color:#5F78BF;
color:#000000;
text-decoration:none;
}
a {
font-family:sans-serif;
color:#FFFFFF;
text-decoration:none;
background:#304F80;
}
a:hover {
font-family:sans-serif;
color:#D0CFC0;
text-decoration:none;
cursor:pointer;
background:#2F375F;
}

gruss,

joe

PS: in opera wird die HP auch korrekt dargestellt, IE funkt sowieso, nur netscape sieht echt grausam aus....in den FAQs und im archiv habe ich nix gefunden

  1. moin Joe,

    padding-left & right stellt der NN 4.x falsch dar, daher auch die Zeilenumbrüche und daraus resultierende nicht funtionierende Navi.
    Ausserdem kann er mit display:block + width nichts anfangen bzw. ermittelt die Breite aus der Länge des Satzes.
    Auch müsste es korrekter Weise background-color heissen.
    Beim hover-effect greift er sich auch (zumindestens der NN 4.78) die falsche Hintergrundfarbe (Bug).
    Versuche ohne padding-left & right auszukommen, damit die Navi auch nutzbar ist, der Rest is wohl eher zu verschmerzen.

    mfg. YLT

    1. hallo YLT,

      padding-left & right stellt der NN 4.x falsch dar, daher auch die Zeilenumbrüche und daraus resultierende nicht funtionierende Navi.

      danke....habe alle paddings auf nur einen wert umgestellt...reicht das...?

      Ausserdem kann er mit display:block + width nichts anfangen bzw. ermittelt die Breite aus der Länge des Satzes.

      daran muss ich noch arbeiten......das verstehe ich so nicht...danke trotzdem für den tip

      Auch müsste es korrekter Weise background-color heissen.

      hab ich gemacht...danke

      Beim hover-effect greift er sich auch (zumindestens der NN 4.78) die falsche Hintergrundfarbe (Bug).

      aha....naja falsche farbe ginge ja gerade noch.....kann ich da was gegen tun..?

      Versuche ohne padding-left & right auszukommen, damit die Navi auch nutzbar ist, der Rest is wohl eher zu verschmerzen.

      hhhmmm......leider nicht....ich hab die backgrounds korrigiert, die spaces nach dem doppelpunkt weggelassen (hab wo gelesen dass der NN das sonst nicht mag) und alle paddings mit nur einem attribut gesetzt....trotzdem sieht das noch nicht nach gegliederter navigation aus

      gruss,

      joe

      PS: im IE hat sich die navi geringfügig geändert...ich denke das ist wegen den geänderten paddings, richtig...?

      1. hallo nochmal,

        also das mit display:block verstehe ich nicht....ist es jetzt erlaubt und wenn ja warum funkt es in NN nicht..?..ich hab schon mehrere beiträge über netscape und css und das gar nicht so seltene block-problem gelesen....aber lösung war keine dabei

        vielleicht hilft ein direkter vergleich ja weiter...ich hab mal 2 screenshots gemacht....ich verwende display:block um die navigation links zu erstellen...bitte wie geht das in netscape...?....es muss nicht display:block sein...hauptsache es funktioniert

        in NN funktionieren nicht mal die links....die darstellung sieht zwar schon ähnlich aus....aber warum erkennt der NN die links im DIV-bereich nicht...?...vielleicht gehe ich die sache ja falsch an

        gruss,

        joe

        PS: es liegt mir wirklich viel daran, dass die seite auch auf NN funkt....ich arbeite schon einige tage daran die HP halbwegs sauber zu programmieren....nur hier weiss ich nimma weiter

        1. Hallo,

          in NN funktionieren nicht mal die links....

          a{ display:block; border ...

          du kannst ja mal per * , also * a , * menu a{ probeweise Teile des CSS
          vor NC4 verstecken..

          Grüsse

          Cyx23

          1. hallo,

            du kannst ja mal per * , also * a , * menu a{ probeweise Teile des CSS
            vor NC4 verstecken..

            super tip...danke......klappt auch mit dem linken DIV......da hab ich einfach das display:block versteckt.....im oberen DIV gibt es so ein display:block nicht, da will ich die links ja waagrecht angeordnet nebeneinander....

            gruss,

            joe

            1. moin Joe,

              wenn Du bei padding nur einen Wert angibst, hast Du nix gekonnt, weil dann top bottom right left den Wert annimmt, also immer noch left und right greifen. Schreib direkt padding-top und padding-bottom, dann müsst die Navi auch waagerecht angezeigt werden.

              Wegen der Breite des Blocks, da hält sich NN nicht an die angegebene Breite sondern ermittelt sie sich selbst, leider, und eine vernünftige Lsg. ist mir nicht bekannt, hatte selber mit dem Problem zu kämpfen und es dann halt so hingenommen. Das selbe trifft auch wegen der Hintergrundfarbe des Blocks zu.

              Funktionieren die Links immer noch nicht ??? Kann grad nicht testen, sitz an einem NN-losen PC.

              mfg. YLT

              1. hallo,

                wenn Du bei padding nur einen Wert angibst, hast Du nix gekonnt, weil dann top bottom right left den Wert annimmt, also immer noch left und right greifen. Schreib direkt padding-top und padding-bottom, dann müsst die Navi auch waagerecht angezeigt werden.

                okay...danke....mein fehler

                Wegen der Breite des Blocks, da hält sich NN nicht an die angegebene Breite sondern ermittelt sie sich selbst, leider, und eine vernünftige Lsg. ist mir nicht bekannt, hatte selber mit dem Problem zu kämpfen und es dann halt so hingenommen. Das selbe trifft auch wegen der Hintergrundfarbe des Blocks zu.

                dazu bin ich schon nen schritt weiter....Eure beiden antworten kombiniert habe ich das display:block in der einen und das width:140px in der anderen DIV versteckt.....das wirft aber ein anderes problem auf: die CSS ist nimma valid....*grübel*

                also sachen vor NN mit * verstecken geht zwar...ist aber nicht konform.....kann ich ein anderes zeichen nehmen zum verstecken oder muss ich eine CSS für NN schreiben und eine für die "anderen" und dann eine browserweiche (sofern ich eine finde)...?

                Funktionieren die Links immer noch nicht ??? Kann grad nicht testen, sitz an einem NN-losen PC.

                die links gehen mittlerweile wenn ich display und width verstecke.....dem IE macht das nix....dem validator aber schon...*lach*

                dann halt morgen....keinen stress....ich arbeite eh dauernd an der seite.....bin erst in der 2. woche des guides dive into accessibility...*und will alles durchackern*

                gruss,

                joe

                PS: warum funken die tastaturkommandos nicht bei netscape...?...wofür gibtŽs den navigator eigentlich, wenn eh nix geht...?...*erste frage ernst gemeint, zweite frage nicht ganz so ernst gemeint*

                1. hallo zusammen,

                  so...jetzt aber.....damit Ihr auch von meinen erfahrungen profitieren könnt....:.....http://www.exine.de/htmlcss/c_trick_browser_style.htm

                  das ganze hab ich gemacht uns sieht so aus:

                  <TITLE>Joachim Dippold - EDV-Berater - Startseite</TITLE>
                      <LINK rel="home" title="Startseite" href=
                      "http://www.joachimdippold.com/index.htm">
                   <LINK rel="stylesheet" type="text/css" media="screen" href=
                      "greenhorn.css">
                      <LINK rel="stylesheet" type="text/css" media="all" href=
                      "longhorn.css">

                  somit bekommt der NN die greenhorn und alle anderen (?) die longhorn als CSS....wenn ich mich irre bitte bescheid sagen....funken tut es auf jeden fall...*freu*

                  gruss,

                  joe...*der jetzt eine pause verdient hat*

                  1. Hallo,

                    somit bekommt der NN die greenhorn und alle anderen (?) die longhorn als CSS....wenn ich mich irre bitte bescheid sagen....funken tut es auf jeden fall...*freu*

                    besuche die von dir genannte URI mit einem Netscape 4 und überlege dann nochmals ob du die Quelle irgendwie für deine Anfoderungen nutzen möchtest.
                    Teste bei dir selbst welche Browser greenhorn oder longhorn bekommen, und überlege ob es mit einer Datei und CSS-Weichen in dieser Datei nicht einfacher wäre.

                    Grüsse

                    Cyx23

                    1. hallo,

                      besuche die von dir genannte URI mit einem Netscape 4 und überlege dann nochmals ob du die Quelle irgendwie für deine Anfoderungen nutzen möchtest.

                      hehehehehehe......cool

                      Teste bei dir selbst welche Browser greenhorn oder longhorn bekommen, und überlege ob es mit einer Datei und CSS-Weichen in dieser Datei nicht einfacher wäre.

                      oki.....wenn ich mehr zeit hab kann ich das machen.....die aktuelle version funkt wenigstens....trotzdem danke für den tip....die seite sieht ja mit NN echt wild aus....*lach*

                      gute nacht,

                      joe

                      PS: soll die weiche in die css-datei oder wie....?...*grübel*

                      1. Hallo,

                        oki.....wenn ich mehr zeit hab kann ich das machen.....die aktuelle version funkt wenigstens....trotzdem danke für den tip....die seite sieht ja mit NN echt wild aus....*lach*

                        [..]

                        PS: soll die weiche in die css-datei oder wie....?...*grübel*

                        da du Netscape 4 mit gleichem/ähnlichem Layout versorgst, kann es übersichtlicher sein in einer Datei, aber wenn es so funktioniert ist ja auch gut. Weiche für NC4 geht z.B. per Kommentar-"Hack" /*/*//*/ ... oder per *

                        #sampl { ..alle browser ..}
                        * #sampl{ .. nc4 kommt hier nicht dran }

                        Grüsse

                        Cyx23

                        1. hallo,

                          #sampl { ..alle browser ..}
                          * #sampl{ .. nc4 kommt hier nicht dran }

                          das problem ist, dass der stern nicht konform zu sein scheint....der validator meldet einen fehler von wegen er mag das zeichen nicht...

                          trotzdem vielen dank für die hilfe auch Dir....denn ohne Euch hätte ich es nie und nimma so schnell geschafft die seite in NN darstellbar zu machen

                          gruss,

                          joe

                          1. Hallo,

                            #sampl { ..alle browser ..}
                            * #sampl{ .. nc4 kommt hier nicht dran }

                            das problem ist, dass der stern nicht konform zu sein scheint....der validator meldet einen fehler von wegen er mag das zeichen nicht...

                            nö, bei welchem Code soll das denn bitte passieren?

                            Das genannte Beispiel ist valide:
                            http://jigsaw.w3.org/css-validator/validator?text=%23sampl+{+color%3Ared+} *+%23sampl+{+color%3Ablue} &warning=1&profile=css2&usermedium=all

                            Grüsse

                            Cyx23

                            1. hallo,

                              auf dem screenshot habe ich das sternzeichen eingerahmt....ohne das sternzeichen ist die datei test.css fehlerfrei...die datei ist online zum probieren

                              ....jetzt schau ich mir mal Dein beispiel an.....vielleicht finde ich meinen fehler

                              gruss,

                              joe

                              1. Hallo,

                                ....jetzt schau ich mir mal Dein beispiel an.....vielleicht finde ich meinen fehler

                                vielleicht hast du die Selektoren falsch eingesetzt? Hier (etwas nach unten scrollen)http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente oder http://selfhtml.teamone.de/css/formate/anzeige/verschachtelt2.htm

                                Grüsse

                                Cyx23

                                1. hallo,

                                  vielleicht hast du die Selektoren falsch eingesetzt? Hier (etwas nach unten scrollen)http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente oder [link:http://selfhtml.teamone.de/css/formate/anzeige/verschachtelt2.ht

                                  danke......ich werde versuchen es in einer datei hinzubekommen.....im moment bin ich aber froh dass es mit 2 unterschiedlichen CSS-dateien geht

                                  danke nochmal und einen ruhigen tag noch,

                                  joe

      2. Hi Joe,

        Beim hover-effect greift er sich auch (zumindestens der NN 4.78) die falsche Hintergrundfarbe (Bug).

        »»

        ähm da hab ich eigentlich Blödsinn geschrieben, nicht hover ... er nimmt im allgemeinen gern eine falsche Hintergrundfarbe bei Block und Link an. Sorry. Und zwar hat er von vornherein schon den des besuchten Links, wenn ich mich nicht irre, aber laut Schrift ist es ein "jungfräulicher" Link.

        PS: im IE hat sich die navi geringfügig geändert...ich denke das ist wegen den geänderten paddings, richtig...?

        ich glaub ja, da jetzt die Abstände in alle Richtungen gleich sind.

        mfg. YLT

        1. hallo Du,

          ähm da hab ich eigentlich Blödsinn geschrieben, nicht hover ... er nimmt im allgemeinen gern eine falsche Hintergrundfarbe bei Block und Link an. Sorry. Und zwar hat er von vornherein schon den des besuchten Links, wenn ich mich nicht irre, aber laut Schrift ist es

          interessanter effekt.....gut zu wissen....mit der farbe soll man also aufpassen bei NN

          ich glaub ja, da jetzt die Abstände in alle Richtungen gleich sind.

          danke

          gruss,

          joe

          1. Hi Joe,

            interessanter effekt.....gut zu wissen....mit der farbe soll man also aufpassen bei NN

            naja, höchstens aufpassen, dass man die bereits besuchten Links nicht zu uninteressant / unlesbar macht ;-).
            Auf der Seite, die ich bearbeitet hatte, wars zum Glück nicht sehr dramatisch, ich hatte mich damals (wie das klingt *g*, ist grad mal 1 oder 2 Monate her) nur eben sehr gewundert & und keine Lsg. gefunden, auch hier im Forum leider nicht, ist eben ein Bug.

            mfg. YLT

            1. hallo,

              naja, höchstens aufpassen, dass man die bereits besuchten Links nicht zu uninteressant / unlesbar macht ;-).

              oh danke....das mit den besuchten links hätte ich fast übersehen

              gruss,

              joe