Safari ignoriert CSS

SilentBob

Aktives Mitglied
Thread Starter
Dabei seit
01.02.2005
Beiträge
360
Reaktionspunkte
0
So, das Design ist soweit fertig. Ich entwickle immer im Firefox. Wenn ich damit fertig bin, schaue ich mir die Seite im IE (6, 5.5 und 5.01) auf der Dose an und notiere mir, was der mal wieder nicht kann. *seufz* Gestern dachte ich dann, schaue es Dir noch einmal in Opera an (Win und Mac). Kein Problem. Lalala trällerte ich vor mir her und schaute mir die Seite in Safari an. :eek: :eek: Was macht der denn???? Ignoriert einfach meine CSS-Anweisungen (teilweise)! Und dabei ist weder die Seite noch die CSS exotisch oder kompliziert! Jemand eine Idee, woran das liegen könnte? Ist mir das erste Mal passiert...

Code-Snippet der HTML:
Code:
<div id="content">
 <p class="hallo">Langer Begrüßungstext. Blabla. Und das typische Lorem ipsum...</p>   
 <div id="starttermine">
  <h2>Termine</h2>
  <p>
  <strong>01.01.06</strong><br />
  Termine kommen hier rein. Dies ist der erste Termin.<br /><a href="/termine/index.php#ter1">Link zum Termin    </a>
  </p>
  <p>
  <strong>03.02.06</strong><br />
  Zweiter Dummy-Termin. Auch hier fiel Blabla.<br /><a href="/termine/index.php#ter2">Link zum Termin</a>
  </p>
 </div>

 <div id="startnews">
  <h2>Neues</h2>
  <p>
  <strong>12.12.05</strong><br />
  Wer hätte es gedacht? Hier kommen die Neuigkeiten hinein. Dies ist Neuigkeit Nummer 1.<br /><a href="/neues/index.php#new1">Link zur Neuigkeit</a>
  </p>
  <p>               
  <strong>10.12.05</strong><br />
  Und dann ist das die Neuigkeit 2. Danach viel Blabla. Hier nur zu Demozwecken.<br /><a href="/neues/index.php#new2">Link zur Neuigkeit</a>
  </p>
 </div>           
</div>
Ich habe einen Header-Bereich, dann einen Haupt-Bereich, in dem eine rechtsbündige Navigation ist und inks der Content-Bereich (s.o.). Die CSS-Anweisungen für das Beispiel sehen so aus:
Code:
/*inhalte*/
#content{
    margin-right: 220px;
    padding: 10px 10px 10px 20px;   
}

.hallo{
    background: #FFEEB6 url(../pics/hallo_ecke.gif) bottom right no-repeat;
    border: 1px solid #FEC100;
    -moz-border-radius:10px;
    padding: 15px;
    font-size: 110%;
}

#startnews{
    background: #A7D8FF url(../pics/startnews.gif) left 2em  repeat-x;
    width: 48%;
    border: 1px solid #2A88D3;
    -moz-border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
    }
#startnews h2{
    background-color: #2A88D3;
    color: #fff;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5em;
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #2A88D3;
}
#startnews p{
    padding: 0 10px 10px 10px;
}

#starttermine{
    background: #B5E386 url(../pics/starttermine.gif) left 2em  repeat-x;
    width: 48%;
    border: 1px solid #3E7506;
    -moz-border-radius: 0 0 10px 10px;
    float: right;
    margin-bottom: 10px;
    }
#starttermine h2{
    background-color: #51930D;
    color: #fff;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5em;
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #3E7506;
}
#starttermine p{
    padding: 0 10px 10px 10px;
}
/*inhalte ende*/
Und was macht Safari? Er ignoriert alles Anweisungen für den Content-Bereich. Folge: Header und Navigation sind "gestylt", mein Hallo-Text, die News und die Termine sind ohne jeglichen Style. Nackig! kopfkratz :mad: Sowas habe ich noch nie erlebt. Ihr?

Ach ja, unter dem Haupt-DIV ist noch eine UL, die wird auch nicht gestylt. *argh*

Grüße
SB
 
Ich kann jetzt in der Darstellung von Firefox und Safari nicht so den Unterschied feststellen, auch wenn jigsw.w3.org keine allzu hohe Meinung von deinem CSS hat...

Matt
 

Anhänge

  • Bild-1.png
    Bild-1.png
    23,5 KB · Aufrufe: 119
Der Screenshot ist mit Safari gemacht?
Dass die CSS nicht gemocht wird, weiß ich, verstehe ich aber nicht so ganz. Dabei sind das noch nicht einmal so wilde Sachen. Weiß nicht, was er z.B. an einer Anweisung wie dieser zu meckern hat: background: no-repeat left 50% url(foo.gif); :mad: :confused:
 
schreibs doch mal einzeln aus:

background-repeat: no-repeat;
background-position: left 50%;
background-image: url(foo.gif);
 
SilentBob schrieb:
Der Screenshot ist mit Safari gemacht?

Ja, sorry, sieht man nicht mehr, nachdem ich den beschneiden musste.

Dass die CSS nicht gemocht wird, weiß ich, verstehe ich aber nicht so ganz. Dabei sind das noch nicht einmal so wilde Sachen.

Es geht nicht um wilde Sachen. Es geht um Sachen, die es nicht gibt, wie etwa -moz-border-radius.

Weiß nicht, was er z.B. an einer Anweisung wie dieser zu meckern hat: background: no-repeat left 50% url(foo.gif); :mad: :confused:

Das 50% (oder aus deinem obigen Code das 2em). Es gibt keine solchen Angaben für 'background'. Ich wüßte auch nicht, für was die gut sein sollen.

Matt
 
1) Das mit dem 50% ist dafür da, dass das Hintergrundbild auf der Y-Achse immer mittig ist, egal, wie groß ich die Schrift ziehe. Das kann man - eben mal gemacht - auch mit center ersetzen. Dann meckert er (bei mir) nicht mehr.

2) Ich habe meinen Fehler gefunden. :rolleyes: Ich hatte noch überflüssige CSS-Anweisungen mit Kommentaren drin, die ich wiederum auskommentiert hatte. Und sowas wie /* color: #000; /*nur fuer IE*/ */ mag der Safari wohl nicht. *flöt*

Trotzdem Danke fürs Schauen. wavey

SB
 
msslovi0 schrieb:
Das 50% (oder aus deinem obigen Code das 2em). Es gibt keine solchen Angaben für 'background'. Ich wüßte auch nicht, für was die gut sein sollen.

Matt
falsch.


was man aber nicht machen darf, ist angaben mischen.

daher:
center & 50% zusammen geht ned
man muss sich für eines entscheiden.

(schau mal bei css4you.de, welche kombis erlaubt sind, ein paar gehen)
(und für die, dies nicht wissen: damit kann man einen Hintergrund ausrichten.)
 
Das mit dem center - ich war schneller. :)

Mal etwas anderes zum Thema: Wenn ich in einer CSS-Anweisung für die verschiedenen IEs habe (Hacks), die ja immer eine falsche Syntax aufweisen müssen, dann ist es natürlich klar, dass jeder Validator mir dafür an die Kehle springt. In allen standartkonformen Browsern sieht es richtig aus, in den entsprechenden IEs *würg* sieht es dank der falschen Syntax dann auch richtig aus. Ein Dilemma. Oder wie umgeht Ihr das?
 
pichfl schrieb:
man aber nicht machen darf, ist angaben mischen.

Man lernt nie aus ;-) Das kommt davon, wen man nie was anderes außer left, center, right etc. verwendet...


Matt
 
Ich mach das ganze meistens nicht in der eigentlichen CSS-Datei, sondern frage die Browserversion ab und lade dann das Stylesheet für IE bei Bedarf. Sieht dann so aus:

Code:
<!--[if IE 6]>
<style type="text/css">
definitionen für ie
</style>
<![endif]-->

Nennt sich conditional Comments und wurde im IE5 eingeführt. Damit gehts auch ohne hacks, weil du einfach ein (für andere Browser nicht funktionales) Stylesheet überlagerst...
 
D.h. Browserweiche und für jeden IE (min. 3) eine eigene CSS... *seufz*
 
Wieso *seufz* ? Ich kann mir keine idealere Lösung vorstellen (ok, mal davon abgesehen dass der IE einfach macht was er soll)

So hast Du alles schön gekapselt. Eine Datei für alle Browser und dann ein extra File für jede Zicke. Keine Hacks die in anderen Browsern Probleme machen könnten, validen Code...einfach optimal! :)
 
Eben. Versteh das Problem nicht. Browserweichen werden übrigens über javascript realisiert und haben damit nix zu tun...

Ausserdem brauchst du ja nur immer die nötigen Bereiche ändern. Eleganter und valider kriegst dus nicht...
 
1) Der Doktor sagt auch Browserweiche dazu. ;)
2) Okay, sauber ist das so schon. Gebe ich zu. Aber wie schaut es aus, wenn man z.B. einen Style-Switcher via PHP realisiert? Das wird dann ganz schön wild. So kann ich ganz einfach drei (oder wieviele auch immer) CSS-Dateien (mit Hacks) ablegen und über meinen Style-Switch ansprechen. Mit der Browserweiche müsste ich z.B. drei mal vier CSS-Dateien machen (1 gute, 3 IEs). Deshalb mein Seufzer... :rolleyes: - Einmal davon abgesehen, dass dann der Switcher auch komplizierter wird. kopfkratz

SB
 
Ist doch auch kein Beinbruch. Du musst nur den PHP-Switcher und die Verzeichnisstruktur anpassen. Ist ne Sache von 5 Minuten.

Ich vermute mal Du bindest eine bestimmte CSS-Datei je nach übergebenem Parameter ein. Z.B. style1.css, style2.css ... wobei die Zahl dann dem Parameter entspricht.

Jetzt legst Du einfach einen neuen Ordner "style" an. Der enthält weitere Unterordner, für jedes Design einen. Also "/style/1/", "/style/2/" ....

Dort hinein kommen dann alle CSS-Files mit den gleichen Namen. z.B. basic.css, ie5.css, ie5.5.css, ie6.css...

Der PHP-Part setzt dann einfach nur noch den richtigen Ordner.

<link type="text/css" rel="stylesheet" href="/style/<?=$_GET['style']?>/basic.css" />
 
SilentBob schrieb:
2) Okay, sauber ist das so schon. Gebe ich zu. Aber wie schaut es aus, wenn man z.B. einen Style-Switcher via PHP realisiert? Das wird dann ganz schön wild. So kann ich ganz einfach drei (oder wieviele auch immer) CSS-Dateien (mit Hacks) ablegen und über meinen Style-Switch ansprechen. Mit der Browserweiche müsste ich z.B. drei mal vier CSS-Dateien machen (1 gute, 3 IEs). Deshalb mein Seufzer... :rolleyes: - Einmal davon abgesehen, dass dann der Switcher auch komplizierter wird. kopfkratz

Es macht, vom Erstellungsaufwand her, doch keinen Unterschied, ob du drei einzelne Dateien mit den passenden CSS-Angaben zusammenstellst oder in einer einzigen irgendwelche Hacks reinfrickeln musst, von denen du nicht weißt, wie sie sich möglichweise in anderen, ebenfalls nicht oder nur bedingt standardkonformen Browsern auswirken werden. Allerdings bekommst du sicherlich weniger graue Haare beim Fehlersuchen, wenn du jede Extrawurst in eine eigene Datei packst.

Und es hat auch etwas gutes, dass es den IE 6 schon ewig gibt und seit Jahren kein Update kam: Der Anteil der 5er und 5.5er Version ist so verschwindend gering, dass man für die nicht mehr wirklich ein eigenes Stylesheet braucht.

Matt
 
Zu 1.
Der Name der Technik ist Conditional Comment. Im Prinzip ist es natürlich eine Browserweiche weil dadurch sichergestellt wird, dass nur der IE die Inhalte liest. Sagen wir 50/50? :)

Zu 2.
Gut, da wirds natürlich ein wenig wilder :D
Ansonsten bleibt da nur die Frage, ob du ältere Browser überhaupt unterstützen musst. Beispielsweise sollte der Support von Netscape 4.x oder IE5 nicht mehr unbedingt nötig sein.

Bei einem durchschnittlichen Kunden (Gebiet Maschinenbau) mit circa 300 Besuchern pro Tag taucht alle 2 Wochen mal einer mit einem IE älter als 6.0 auf. Und Netscape 4.x hatte ich das letzte mal in meinen Logs als ich mit eben diesem getestet habe...

Wenn du es also nicht zu 100% brauchst (und es niemand mehr verwendet) warum dann noch diese alten Browser unterstützen? Lohnt sich der Aufwand wirklich für dich?

Ansonsten würde ich dir empfehlen einen Comment für alle IEs zu erstellen und das jeweilige Stylesheet dann eben auf IE6 zu optimieren und IE5.x sozusagen ein wenig "hinternan" zu stellen...

Wie man diese Woche erfahren durfte wird auch der IE:mac ab nächstem Jahr nicht mehr weiterentwickelt, musst du dir also um den auch keine Sorgen mehr machen...
 
@dms: Okay, das lasse ich mir noch einmal durch den Kopf gehen. Dann könnte man das doch so machen.

@acid:
Okay. :) Ansonsten: Den Netscape 4x ignoriere ich auch fröhlich. Hingegen die IE5er - muss ich nehmen. Blöde, wenn der Kunde Win2000 mit IE5.01 hat. *räusper* Zumal laut Statistik das immerhin noch gut 6% sind, die mit einen 5er unterwegs sind. *grrr* Ach so, und den MacIE habe ich bisher immer vernachlässigt. ;) Obwohl ich mir meine Seiten damit von Zeit zu Zeit auch anschaute und feststellen musste, dass dort Dinge liefen, die im WinIE nicht funktionierten. :eek:
 
acid schrieb:
Wie man diese Woche erfahren durfte wird auch der IE:mac ab nächstem Jahr nicht mehr weiterentwickelt, musst du dir also um den auch keine Sorgen mehr machen...

Weiterentwickelt wird er schon seit über zwei Jahren nicht mehr. Und am 31.12. stirbt dann auch der Support für den Mac-IE, was u.a. heißt, das es ihn auf den Mactopia-Seiten auch nicht mehr zum Download geben wird.

Und weil sie darin jetzt ja schon Übung haben, könnten sie doch mit dem Win-IE gleich weitermachen...

Matt
 
Zurück
Oben Unten