Merkwürdiges CSS Verhalten

**ewaldo** · 22.07.2013, 13:47

Hallo zusammen,

ich betreibe, wie aus meinen Postings bekannt schon längere Zeit eine Website mit Contao 2.11.10
http://www.schach-wolfsberg.at/

Gestern habe ich auf der Entwicklungsumgebung MAMP PRO auf meinem MacBook einige Änderungen im Headerbereich getestet u.a. den Gradient einfärbig gestaltet und in der bildschirm.css im Selektor #header einen border-top eingefügt:

Code:

@media screen {

html{ overflow-y: scroll; }
body {
  background-color: #c3bfb3;
  font: 80.00%  Verdana, Arial, Helvetica, sans-serif !important;
}

/* Restaurierung der Listen */
ol,ul { margin-bottom:1.5em; }
li { margin-left:2em; }
ul li { list-style: square; }
ol li { list-style: decimal; }

#wrapper{
  background-color: #fefce6;
}

#header{
  margin-top:1em;
  background: url("../images/header_gradient.jpg") repeat-x left top;
  padding: 34px 0 0 0;
  
#header .inside {
	border-top: 3px;
	border-top-color: black;
}
  
}

#header .logo .bild {
	float:left;
	display:inline;
	width:120px;
	margin-left: 18px;
	margin-top:2px;
	
}

#header .logo .text {
	float:left;
	display:inline;
	width:400px;	
}

#header .logo .text{
	width:600px;
	padding-top: 28px;
	padding-left: 36px;
}

#header .logo .bild_right {
	float:right;
	display:inline;
	width:120px;
	margin-right: 18px;
	margin-top:2px;
}
	
.clear{
	clear: both;
	display: block;
}

siehe fettgedruckt (ich habe hier nur den Headerbereich der bildschirm.css kopiert).

Da mir das ganze dann nicht gefallen hat, habe ich alle Änderungen verworfen (gesicherte header_gradient.jpg wieder verwendet und den inside border Eintrag gelöscht).

Ich habe nun fast einen Tag damit verbracht um irgendwo die Stecknadel im Heuhaufen zu suchen, bis ich schließlich aufgegeben habe und mich nun an Euch wende.

Was ist passiert: Auf meinen drei Browsern (Firefox, Chrome u. Safari) baut sich die Seite vom Backend - Frontend-Vorschau wie in den Screenshots jeweils verschieden im Headerbereich auf ?? Einzig im Safari wird sie im Orginalzustand dargestellt:

safari.jpg
firefox.jpg
chrome.jpg

Woran kann das liegen? Habe ich da irgenwo was abgeschossen

- gott sei dank ist es nur in der Entwicklungsumgebung am Rechner, am Server hab ich nichts angerührt.

Aber interessieren würde es mich allemal, wenn mir hier jemand einen Tipp geben könnte,

lge

**Samson1964** · 22.07.2013, 14:23

IE 8 und Opera 12.01 zeigen bei mir Deine intakte Safari-Version. Wahrscheinlich das allseits bekannte Cacheproblem - Contao- und Browsercache.

Mit CSS hatte ich beim Caching weniger Probleme, da ich den Contaocache nicht aktiviert habe und den Browsercache im Zweifel immer leere. Mehr Sorgen bereitet mir immer die Reihenfolge der CSS-Definitionen: Da ich mein CSS in Kategorien unterteilt habe, ist nie ersichtlich in welcher Reihenfolge das CSS abgearbeitet wird.

Schachliche Grüße nach Österreich!

Edit: Jetzt gerade gelesen, daß Du Deine lokale Version meinst... Auf die habe ich ja keinen Zugriff.