Safari ignoriert CSS

Dieses Thema im Forum "Web Page Design" wurde erstellt von SilentBob, 20.12.2005.

  1. SilentBob

    SilentBob Thread Starter MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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:
    HTML:
    <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
     
  2. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    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:

  3. SilentBob

    SilentBob Thread Starter MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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:
     
  4. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    MacUser seit:
    18.08.2005
    schreibs doch mal einzeln aus:

    background-repeat: no-repeat;
    background-position: left 50%;
    background-image: url(foo.gif);
     
  5. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Ja, sorry, sieht man nicht mehr, nachdem ich den beschneiden musste.

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

    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
     
  6. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Das macht's nicht richtiger ;-)
    Aber ja, es hilft, den Fehler einzugrenzen.

    Matt
     
  7. SilentBob

    SilentBob Thread Starter MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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
     
  8. pichfl

    pichfl MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    2
    MacUser seit:
    03.08.2005
    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.)
     
  9. SilentBob

    SilentBob Thread Starter MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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?
     
  10. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Man lernt nie aus ;-) Das kommt davon, wen man nie was anderes außer left, center, right etc. verwendet...


    Matt
     
Die Seite wird geladen...

Diese Seite empfehlen