Hallo zusammen,

ich hab ein großes Problem bei der Entwicklung einer einfachen Website mit Coda, wahrscheinlich nur ein dämlicher Denkfehler, aber er beschäftigt mich jetzt bald zwei Stunden.
Und zwar hab ich den ganzen HTML/CSS Code bisher in Coda geschrieben und bis dato immer mit der Coda Preview, die Ergebnisse kontrolliert, hin und wieder auch mit Chrome.
Irgendwann musste ich dann feststellen das die Darstellung in der Coda Preview und Chrome vollkommen unterschiedlich sind: Chrome und Firefox stellen fast gar keine Änderungen am Stylesheet mehr dar, bei Safari und der internen Vorschau sieht alles normal aus.
Wenn ich in die Webinformationen bei Chrome schaue sind die ganzen Elemente aus dem Stylesheet rot markiert, auch die die korrekt angezeigt werden.
Ich hoffe irgendwer versteht was ich meine, leider hab ich in meinem Frust inzwischen wieder fast alles gelöscht in der Hoffnung das es irgendwie wieder geht aber naja
Ich häng mal die zugehörigen Dokumente an, vllt wird irgendwer ja schlau draus:


Vielen Dank für eure Hilfe!

HTML:



CSS


Coda/Safari:

Chrome/FF

1. Warum schreibst Du im CSS Folgendes (Redundanz und im ersten Fall unsinnig):

body{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background-color:#f0efe0;
color:#7b5a47;
font-family:helvetica,arial;
font-size:1em;
}

2. Warum referenzierst Du relative URLs statt absolute URLs (ausgehend vom Root-Verzeichnis) hier:

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

und hier:

background-image: url(/img/top.png);

Besser/intelligenter wäre:

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

bzw.

background-image: url(/img/top.png);

3. ist der gekachelte Hintergrund auf Basis eines einfarbigen Bildes (top.png) wirklich sinnvoll, wenn Du den offenbar einfarbigen Hintergrund viel einfacher und schneller einfärben kannst, indem Du statt des einfarbigen und gekachelten Bildes via CSS eigentlich direkt die Hintergrundfarbe via background-color bestimmen kannst?

4. Existiert überhaupt das Bild an genau der Stelle (../img/top.png), wo Du es abholen willst? Oder könnte/müsste es evtl. mehr als eine Stufe vom Verzeichnis zurückgehen, indem Deine HTML-Dateien liegen, also evtl. ../../img/top.png heißen?

5. Wenn 4. zutrifft, dann weißt Du auch, warum ich 2. vorgeschlagen habe (damit umgehst Du nämlich solche Probleme und musst Dich nicht immer drum kümmern, wieviele Verzeichnisse Du nun zurückgehen musst, um in einen anderen Verzeichniszweig zu gelangen).

Zu 4. Ich habe mir Deinen Code eben kopiert und lokal abgespeichert. Logischerweise habe ich Dein Hintergrundbild top.png nicht, weil Du Screenshots gepostet hast. Folge: in jedem Browser wird mir dasselbe Ergebnis gezeigt: ohne roten Header.

Und genau daran wird's liegen, denn wenn ich den Hintergrund in Ermangelung von top.png in derselben Farbe (#500e00) einfärbe, dann habe ich -- Oh Wunder! -- überall in jedem Browser plötzlich einen dunkelroten Header, wie es sein soll!

Kleiner Verbesserungsvorschlag deshalb (die background-Regeln kann man auch zusammenziehen, Farbe + Hintergrundbild für den Fall, dass das Hintergrundbild nicht angezeigt werden kann):


Oder, wenn's wirklich ein einfarbiges Hintergrund-Kachelchen ist, noch besser schlicht und einfach und kurz so:


Aufgeräumt sieht dann Dein Stylesheet z.B. so aus:


That's it!

Ah super Habs grad ausprobiert funktioniert jetzt wieder!
Ich denk das Chaos in meiner Ordnerstruktur war Schule, hab jetzt alles geändert so wie du's gepostet hast und jetzt siehts wieder normal aus.
Was ich aber nicht verstehe ist, wieso die Preview das ganze immer noch korrekt angezeigt hat obwohl der ganze Code ja ziemlicher Unsinn war
Vielen Dank auf jedenfall!