Webdesign: Sonderzeichensalat bei per CSS formatierten Bereichen

Dieses Thema im Forum "Software" wurde erstellt von Janna, 7. Januar 2004.

  1. Janna

    Janna New Member

    Hallo, ich habe eine Frage an HTML- und CSS-Erfahrene unter Euch:

    Ich schaute mir heute meine Website von meinem Arbeitsplatzrechner aus an und entdeckte mit Schrecken, dass alle mit u. g. Stylesheet formatierten Objekte ausschließlich aus seltsamen Sonderzeichen bestanden. Ich entwickle unter MacOS X, teste sowohl unter Mac als auch unter Win mit allen gängigen aktuellen Browsern – so etwas habe ich noch nie gesehen. Der IE zeigte mir die Site wieder, wie auch sonst alle Rechner und Browser, von denen aus ich sie aufgerufen habe, völlig normal an. Hier ist das CSS:

    .border {
    border-collapse: collapse;
    border: 1px dotted #888888;
    padding: 3px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 9px;
    line-height: 13px;
    color: #444444;
    vertical-align: top;
    background-color: #FFFFFF;
    }

    Ansehen könnt Ihr Euch die Stellen unter
    http://www.typemotion.de
    dort den Link »About« aufrufen, unten rechts steht »Neugierig?« in einer grau gepunkteten Box,
    oder
    http://www.typemotion.de/_home/index.php
    dort die rechts und links mit einer grau gepunkteten Linie umrandeten Rubriken »Umgeschaut«, »Sitetipp?« und »Newsletter?«.
    Danke für jeden Hinweis,
    liebe Grüße
    Janna
     
  2. spatium

    spatium New Member

    hallo janna.

    kompliment für den code. so saubere codes können nur typografiebegeisterte niederschreiben.
    allerdings habe ich dein problem nicht gesehen - ist ja auch schon eine weile her und du hast es sicher inzwischen rausgekriegt.
    übrigens hats in dem kleinen popup über dich noch einen leerschlag und ein apostroph zuviel.

    spatium
     
  3. Janna

    Janna New Member

    Hallo Spatium,

    leider habe ich noch keine Lösung gefunden. Ich bin ihr allerdings eventuell einen Schritt näher gekommen: In dem selben Raum (einem Schulungsraum mit 20 Macs) stellen andere Rechner mit Safari die Seiten vollkommen korrekt dar. Es scheint etwas mit diesem einen lokalen Rechner zu tun zu haben.

    Abgesehen davon werde ich in der nächsten Woche den Code überprüfen und die Fehler angehen – Danke für deine Hinweise! :))))

    Wenn ich die Lösung finde, gebe ich sie hier bekannt. Und wenn jemand anderes sie findet: bitte gebt mir einen Tipp! :)

    Liebe Grüße,
    Janna
     
  4. spatium

    spatium New Member

    ich hab jetzt noch kurz mit dem ns7 und dem ie5 draufgeschaut und den fehler nicht gesehen. darum wirds wahrscheinlich für alle schwierig, dir zu helfen. im code um diese objekte rum sieht alles ok aus.
    allerdings harmonieren die angaben in den table-tags nicht so ganz mit der class border. padding border widersprichen sich. aber das kann nicht die von dir beschriebene störung verursachen.

    hab deine anfrag nochmals genau gelesen. heisst das, dass anstelle eines bildes ein haufen wirre zeichen dargestellt werden - oder anstelle der ganzen tabelle?
     
  5. Janna

    Janna New Member

    Hallo Spatium,

    nein, es ist nicht die Tabelle, die sich gestört zeigt :), sondern der Textinhalt. Bilder sind nicht betroffen. Das kann ich mit Bestimmtheit sagen, weil sich der Fehler auch in dem PopUp »About« zeigt, und zwar in dem einem Wort, »Neugierig?«, am Ende der Seite, das lediglich in einer Ebene eingegeben ist. Dort bezieht sich die Deklaration auf das <div>-Tag. Auf der Seite »Home« habe ich das Stylesheet auf das <table>-Tag angewandt, die Bilder werden einwandfrei dargestellt.

    Mit den widersprüchlichen Angaben meinst Du, dass ich zunächst »border="0"« angebe und später in der Zuweisung der benutzerdefinierten Klasse einen Rand definiere, nämlich den gepunkteten? Nein, Du beziehst Dich auf »padding« in dem Stylesheet … meines Wissens bezieht sich dieser Wert auf den Innenabstand, und tatsächlich rücken alle Inhalte in den entsprechenden Boxen, ob Ebene oder Tabellenzelle, wie gewünscht vom Rand ab. Ich wusste bisher nicht, dass das nicht standardkonform ist. (?) Bitte erkläre mir das, wenn Du vielleicht später mal Zeit hast, mir ist sehr gelegen, aus meinen Fehlern zu lernen, zumal meine Schüler davon immer profitieren :).
    Danke für Dein Engagement, das ist toll!
    Liebe Grüße
    Janna
     
  6. spatium

    spatium New Member

    hallo janna

    ich meine beides, mein sätzchen war wohl etwas undeutsch. du hast den border und das padding doppelt definiert - einmal im tag und einmal im css. das padding ist natürlich standard - da hast du recht. und natürlich macht das auch nix so, wie dus gemacht hast, weil das css scheinbar (mindestens beim border) erste priorität hat. aber für die fehlersuche ist es natürlich einfacher, wenn du eindeutig definierst.

    so von wegen standardkonform: http://selfhtml.teamone.de/index.htm kennst du, oder?

    das ist jetzt ein bisschen gemein: ich hab dir doch am anfang ein kompliment für den sauberen code gemacht. da hab ich allerdings nur den von "| :typemotion :: Ich |" angeschaut und der sah handgeschrieben aus. wenn ich mir aber die home ansehe, sieht der code mehr nach wysiwyg-editor aus (?) - und dann kannst du nix dafür. :)
    die arbeit mit einem wysiwyg-editor würde auch erklären, warum unnötigerweise layers verwendet wurden.

    liebe grüsse
    spatium
     
  7. Janna

    Janna New Member

    Hallo Spatium,

    »selbstverständlich« arbeite ich primär mit einem Editor, ist meine ketzerische Antwort ;-) Nicht, weil ich HTML nicht kann (ich spreche es beinahe fließend), sondern weil meine Perspektive auf ein Webprojekt Konzept und Gestaltung sind. HTML und CSS sind Werkzeuge, mit denen ich visuelle Prozesse umsetze, nicht Selbstzweck. Schließlich tippe ich meine QuarkXPress-Dokumente auch nicht in Postscript. :)
    Tatsächlich arbeite ich ständig manuell im Code, sei es, dass ich JavaScripte auslagere, um den Code übersichtlicher und schlanker zu machen, sei es, dass ich meine CSS selbst handschreibe, um ID-Sektoren nutzen zu können, sei es, dass ich ganze Elemente wie z. B. iFrames programmiere. Der Code von :typemotion ist weitgehend korrekt und standardkonform. Es gibt Fehler, aber es sind erfreulich wenige.

    In diesem Zusammenhang versehe ich Deinen Kommentar zu den Layern nicht. Ebenen und CSS sind die Zukunft des Webdesign; Tabellen sind für mich nur noch Krücken, die ich wegwerfen werde, sobald alle gängigen Browser CSS Level 2 standardgemäß umsetzen. Rein in Tabellen erstellte Seiten sind nicht mehr zeitgemäß.

    Es gibt diese zwei Lager, in die sich Webdesigner bis heute spalten: die Programmierer und die Designer. Nur wenige vereinen in sich beide Ansprüche, und ich zähle mich zu dieser Minderheit. Websites von Programmierern sehen leider, ist meine Erfahrung, gestalterisch (und vor allem typographisch) oft grauselig aus. Echte Ellipsen, Anführungszeichen, Halbgeviertstrich? Unbekannte Welten. Kenntnisse über Farbkontraste, Gestaltungsraster, Bild- und Schriftwirkung? Fehlanzeige, rudimentär vorhanden. Der Code ist nicht alles, Spatium, glaube mir. Lieber ein paar Tabellenzeilen abenteuerlich gesetzt (das macht Dreamweaver tatsächlich) als visuelle Katastrophen programmiert. :)))

    Und den Fehler habe ich immer noch nicht gefunden :-(
    Wie gesagt, ich werde sie hier verkünden, wenn ich sie denn finde …

    Liebe Grüße,
    Janna
     
  8. spatium

    spatium New Member

    hallo janna

    jetzt muss ich mich ja verteidigen. postscript ist ja auch kein relativer hypertext, bzw. keine interpretationssache. ich habe nichts gegen das arbeiten mit editor. ich habe nur das kompliment zurückgenommen, weil ich anfänglich dachte, du hättest alles von hand geschrieben. sei nicht böse.

    ich selbst habe mich auf die fundamentalen html-möglichkeiten beschränkt, weil ich, je länger ich damit arbeitete, merkte, wie wenig wirklich funktionierte. html wurde ja auch nicht dafür geschaffen, was heute alles von ihr verlangt wird. im web wird sich sicher noch einiges tun - hoffentlich weg von html.

    ... ok, ich arbeiten natürlich auch mit css - ist ja klar als typograf - mit und der bequemlichkeit halber mit asp-includes. aber ich habe mich auf schnelle, sichere und vorallem korrekturfreundliche und günstige websites spezialisiert - etwas anderes können sich meinen kunden nicht leisten und etwas anderes möchte ich ihnen auch nicht verkaufen. darum schreibe ich alles "hardcode": http://www.schwarzkunst.ch :) als typograf gilt meine leidenschaft halt auch dem hypertext. ich zähl mich darum ebenfalls zu besagter minderheit.

    in layern habe ich bis jetzt für meine arbeit noch keinen vorteil entdeckt und tabellen mögen zwar alt sein, aber alt ist im web nicht gleich schlecht. die kundschaft hinkt in bestimmten kreisen mit der sofware ja sowieso immer zwei jahre hinterher.

    so ... hoffe, meinen kopf ein bisschen aus der schlinge gezogen zu haben.

    spatium z.B. geviert
     
  9. Janna

    Janna New Member

    Hallo Spatium

    ich bin Dir nicht böse, dafür bist Du viel zu höflich und souverän. :)
    Mich irritieren nur Hardliner, gleich aus welcher Richtung, und ich konnte nicht einschätzen, ob Du einer bist.

    Ich habe mir gerade Deine Plakate angesehen – toll, das ist Typo, wie ich sie liebe! Wäre glatt einen Hinweis auf :typemotion wert, z. B. unter »Umgeschaut« auf besagter Seite … ich würde es meinetwegen auch mit der Hand tippen ;-P

    *wegduck*

    Liebe Grüße
    Janna
     
  10. spatium

    spatium New Member

    hallo janna

    vielen dank fürs kompliment. es wär natürlich schön, wenn im netz wieder ein link mehr auf uns zeigen würde - umso schöner, wenn er auf einer verwandten site steht. leider kann ich dir keine gegenleistung dafür anbieten. ich werd aber deine url behalten und gelegentlich mal reinschauen oder auch ein bisschen code pflücken.

    vielleicht kann ich dir ja mal bei einem andern problem helfen. liebe grüsse aus dem schweizer ostblock.
     
  11. iLig

    iLig Member

    Hallo,
    hab jetzt nicht den Ganzen Thread durchgelesen, aber kann es sein, dass auf diesem Rechner Suitcase (wahrscheinlich nur) mit automatischer Schriftaktivierung läuft? Wenn ich das bei mir eingeschaltet habe passiert auf manchen Seiten das Gleiche. Ich muss dann Safari neu starten danach werden die selben Seiten wieder richtig dargestellt.
     
  12. spatium

    spatium New Member

    hallo janna.

    kompliment für den code. so saubere codes können nur typografiebegeisterte niederschreiben.
    allerdings habe ich dein problem nicht gesehen - ist ja auch schon eine weile her und du hast es sicher inzwischen rausgekriegt.
    übrigens hats in dem kleinen popup über dich noch einen leerschlag und ein apostroph zuviel.

    spatium
     
  13. Janna

    Janna New Member

    Hallo Spatium,

    leider habe ich noch keine Lösung gefunden. Ich bin ihr allerdings eventuell einen Schritt näher gekommen: In dem selben Raum (einem Schulungsraum mit 20 Macs) stellen andere Rechner mit Safari die Seiten vollkommen korrekt dar. Es scheint etwas mit diesem einen lokalen Rechner zu tun zu haben.

    Abgesehen davon werde ich in der nächsten Woche den Code überprüfen und die Fehler angehen – Danke für deine Hinweise! :))))

    Wenn ich die Lösung finde, gebe ich sie hier bekannt. Und wenn jemand anderes sie findet: bitte gebt mir einen Tipp! :)

    Liebe Grüße,
    Janna
     
  14. spatium

    spatium New Member

    ich hab jetzt noch kurz mit dem ns7 und dem ie5 draufgeschaut und den fehler nicht gesehen. darum wirds wahrscheinlich für alle schwierig, dir zu helfen. im code um diese objekte rum sieht alles ok aus.
    allerdings harmonieren die angaben in den table-tags nicht so ganz mit der class border. padding border widersprichen sich. aber das kann nicht die von dir beschriebene störung verursachen.

    hab deine anfrag nochmals genau gelesen. heisst das, dass anstelle eines bildes ein haufen wirre zeichen dargestellt werden - oder anstelle der ganzen tabelle?
     
  15. Janna

    Janna New Member

    Hallo Spatium,

    nein, es ist nicht die Tabelle, die sich gestört zeigt :), sondern der Textinhalt. Bilder sind nicht betroffen. Das kann ich mit Bestimmtheit sagen, weil sich der Fehler auch in dem PopUp »About« zeigt, und zwar in dem einem Wort, »Neugierig?«, am Ende der Seite, das lediglich in einer Ebene eingegeben ist. Dort bezieht sich die Deklaration auf das <div>-Tag. Auf der Seite »Home« habe ich das Stylesheet auf das <table>-Tag angewandt, die Bilder werden einwandfrei dargestellt.

    Mit den widersprüchlichen Angaben meinst Du, dass ich zunächst »border="0"« angebe und später in der Zuweisung der benutzerdefinierten Klasse einen Rand definiere, nämlich den gepunkteten? Nein, Du beziehst Dich auf »padding« in dem Stylesheet … meines Wissens bezieht sich dieser Wert auf den Innenabstand, und tatsächlich rücken alle Inhalte in den entsprechenden Boxen, ob Ebene oder Tabellenzelle, wie gewünscht vom Rand ab. Ich wusste bisher nicht, dass das nicht standardkonform ist. (?) Bitte erkläre mir das, wenn Du vielleicht später mal Zeit hast, mir ist sehr gelegen, aus meinen Fehlern zu lernen, zumal meine Schüler davon immer profitieren :).
    Danke für Dein Engagement, das ist toll!
    Liebe Grüße
    Janna
     
  16. spatium

    spatium New Member

    hallo janna

    ich meine beides, mein sätzchen war wohl etwas undeutsch. du hast den border und das padding doppelt definiert - einmal im tag und einmal im css. das padding ist natürlich standard - da hast du recht. und natürlich macht das auch nix so, wie dus gemacht hast, weil das css scheinbar (mindestens beim border) erste priorität hat. aber für die fehlersuche ist es natürlich einfacher, wenn du eindeutig definierst.

    so von wegen standardkonform: http://selfhtml.teamone.de/index.htm kennst du, oder?

    das ist jetzt ein bisschen gemein: ich hab dir doch am anfang ein kompliment für den sauberen code gemacht. da hab ich allerdings nur den von "| :typemotion :: Ich |" angeschaut und der sah handgeschrieben aus. wenn ich mir aber die home ansehe, sieht der code mehr nach wysiwyg-editor aus (?) - und dann kannst du nix dafür. :)
    die arbeit mit einem wysiwyg-editor würde auch erklären, warum unnötigerweise layers verwendet wurden.

    liebe grüsse
    spatium
     
  17. Janna

    Janna New Member

    Hallo Spatium,

    »selbstverständlich« arbeite ich primär mit einem Editor, ist meine ketzerische Antwort ;-) Nicht, weil ich HTML nicht kann (ich spreche es beinahe fließend), sondern weil meine Perspektive auf ein Webprojekt Konzept und Gestaltung sind. HTML und CSS sind Werkzeuge, mit denen ich visuelle Prozesse umsetze, nicht Selbstzweck. Schließlich tippe ich meine QuarkXPress-Dokumente auch nicht in Postscript. :)
    Tatsächlich arbeite ich ständig manuell im Code, sei es, dass ich JavaScripte auslagere, um den Code übersichtlicher und schlanker zu machen, sei es, dass ich meine CSS selbst handschreibe, um ID-Sektoren nutzen zu können, sei es, dass ich ganze Elemente wie z. B. iFrames programmiere. Der Code von :typemotion ist weitgehend korrekt und standardkonform. Es gibt Fehler, aber es sind erfreulich wenige.

    In diesem Zusammenhang versehe ich Deinen Kommentar zu den Layern nicht. Ebenen und CSS sind die Zukunft des Webdesign; Tabellen sind für mich nur noch Krücken, die ich wegwerfen werde, sobald alle gängigen Browser CSS Level 2 standardgemäß umsetzen. Rein in Tabellen erstellte Seiten sind nicht mehr zeitgemäß.

    Es gibt diese zwei Lager, in die sich Webdesigner bis heute spalten: die Programmierer und die Designer. Nur wenige vereinen in sich beide Ansprüche, und ich zähle mich zu dieser Minderheit. Websites von Programmierern sehen leider, ist meine Erfahrung, gestalterisch (und vor allem typographisch) oft grauselig aus. Echte Ellipsen, Anführungszeichen, Halbgeviertstrich? Unbekannte Welten. Kenntnisse über Farbkontraste, Gestaltungsraster, Bild- und Schriftwirkung? Fehlanzeige, rudimentär vorhanden. Der Code ist nicht alles, Spatium, glaube mir. Lieber ein paar Tabellenzeilen abenteuerlich gesetzt (das macht Dreamweaver tatsächlich) als visuelle Katastrophen programmiert. :)))

    Und den Fehler habe ich immer noch nicht gefunden :-(
    Wie gesagt, ich werde sie hier verkünden, wenn ich sie denn finde …

    Liebe Grüße,
    Janna
     
  18. spatium

    spatium New Member

    hallo janna

    jetzt muss ich mich ja verteidigen. postscript ist ja auch kein relativer hypertext, bzw. keine interpretationssache. ich habe nichts gegen das arbeiten mit editor. ich habe nur das kompliment zurückgenommen, weil ich anfänglich dachte, du hättest alles von hand geschrieben. sei nicht böse.

    ich selbst habe mich auf die fundamentalen html-möglichkeiten beschränkt, weil ich, je länger ich damit arbeitete, merkte, wie wenig wirklich funktionierte. html wurde ja auch nicht dafür geschaffen, was heute alles von ihr verlangt wird. im web wird sich sicher noch einiges tun - hoffentlich weg von html.

    ... ok, ich arbeiten natürlich auch mit css - ist ja klar als typograf - mit und der bequemlichkeit halber mit asp-includes. aber ich habe mich auf schnelle, sichere und vorallem korrekturfreundliche und günstige websites spezialisiert - etwas anderes können sich meinen kunden nicht leisten und etwas anderes möchte ich ihnen auch nicht verkaufen. darum schreibe ich alles "hardcode": http://www.schwarzkunst.ch :) als typograf gilt meine leidenschaft halt auch dem hypertext. ich zähl mich darum ebenfalls zu besagter minderheit.

    in layern habe ich bis jetzt für meine arbeit noch keinen vorteil entdeckt und tabellen mögen zwar alt sein, aber alt ist im web nicht gleich schlecht. die kundschaft hinkt in bestimmten kreisen mit der sofware ja sowieso immer zwei jahre hinterher.

    so ... hoffe, meinen kopf ein bisschen aus der schlinge gezogen zu haben.

    spatium z.B. geviert
     
  19. Janna

    Janna New Member

    Hallo Spatium

    ich bin Dir nicht böse, dafür bist Du viel zu höflich und souverän. :)
    Mich irritieren nur Hardliner, gleich aus welcher Richtung, und ich konnte nicht einschätzen, ob Du einer bist.

    Ich habe mir gerade Deine Plakate angesehen – toll, das ist Typo, wie ich sie liebe! Wäre glatt einen Hinweis auf :typemotion wert, z. B. unter »Umgeschaut« auf besagter Seite … ich würde es meinetwegen auch mit der Hand tippen ;-P

    *wegduck*

    Liebe Grüße
    Janna
     
  20. spatium

    spatium New Member

    hallo janna

    vielen dank fürs kompliment. es wär natürlich schön, wenn im netz wieder ein link mehr auf uns zeigen würde - umso schöner, wenn er auf einer verwandten site steht. leider kann ich dir keine gegenleistung dafür anbieten. ich werd aber deine url behalten und gelegentlich mal reinschauen oder auch ein bisschen code pflücken.

    vielleicht kann ich dir ja mal bei einem andern problem helfen. liebe grüsse aus dem schweizer ostblock.
     

Diese Seite empfehlen