css wird unterschiedlich angezeigt

Dieses Thema im Forum "Web Page Design" wurde erstellt von vitamin.b, 15.02.2007.

  1. vitamin.b

    vitamin.b Thread Starter MacUser Mitglied

    Beiträge:
    382
    Zustimmungen:
    44
    MacUser seit:
    26.10.2006
    hallo liebes forum,

    [​IMG]

    ich verstehe nicht warum der internetexplorer folgenden css code anders darstellt wie safari oder firefox :confused: ?

    Code:
    #msg-error {
    	font-family: Arial, Helvetica, Geneva, sans-serif;
    	color: #f00;
    	border-left: 5px solid #f00;
    	padding: 4px 4px 4px 30px;
    	background: #ffc8c8 url(img/exclamation.png) no-repeat 5px 5px;
    }
    html ausgabe ist:
    Code:
    <div id="msg-error">asd<br>fasdf</div>
    kann mir das bitte jemand mal kurz erklären und evtl auch nen tipp geben wie ich das umgehen kann?

    danke schonmal :)
     
  2. Jass

    Jass MacUser Mitglied

    Beiträge:
    1.248
    Zustimmungen:
    105
    MacUser seit:
    10.02.2007
    Kann es sein, dass der Internet explorer die Positionierung des Bildes ab der div-container rechnet und firefox ab dem Rand?

    Das wäre zumindest die einzige Erklärung die mir einfiele
     
  3. vitamin.b

    vitamin.b Thread Starter MacUser Mitglied

    Beiträge:
    382
    Zustimmungen:
    44
    MacUser seit:
    26.10.2006
    von der optik her könnte man es meinen

    wie umgehe ich denn sowas?
     
  4. Jass

    Jass MacUser Mitglied

    Beiträge:
    1.248
    Zustimmungen:
    105
    MacUser seit:
    10.02.2007
    Speziell dafür weiß ich leider keine Lösung und leider ist es bei CSS immer so, dass nicht alle Browser alles gleich interpretieren. :(

    Aber es gibt da bestimmt irgentwelche Tricks wie man den Internetexplorer dazu bringen kann, das Ganze so anzuzeigen wie Firefox & co. :)
     
  5. vitamin.b

    vitamin.b Thread Starter MacUser Mitglied

    Beiträge:
    382
    Zustimmungen:
    44
    MacUser seit:
    26.10.2006
    ich hab eine art browserweiche per css gefunden und extra für den ie eine angepasste css datei erstellt aber leider greift die weiche nicht :(

    die seite sieht genauso aus wie vorher

    das ist der code der im header steht:
    Code:
    
    <style type="text/css">
       @import url(style.css);
    </style>
    
    <style type="text/css">
       <!--[if IE]>
       @import url(style_ie.css);
       <![endif]-->
    </style>
     
  6. ichamel

    ichamel MacUser Mitglied

    Beiträge:
    394
    Zustimmungen:
    21
    MacUser seit:
    08.12.2003
    Hallo, schau Dir mal das Template unter http://www.intensivstation.ch/files/templates/2/template-2.html an! Dort wird eine Art "inner div" konstruiert, der nur wegen der Macken des IE benötigt wird.

    Als andere Alternative fällt mir noch ein, dass Du Deinen Code ja mal beim W3C auf Konformität checken könntest. Wenn man dort mit 0 Fehlern besteht, funktioniert die Sache in der Regel auch in allen Browsern - "hoffentlich";)

    Lass uns mal an Deinen Forschungsergebnissen teilhaben!! Viele Grüße, Michael
     
  7. Mephisto_

    Mephisto_ MacUser Mitglied

    Beiträge:
    726
    Zustimmungen:
    12
    MacUser seit:
    02.11.2006
    ich bin der meinung das der ie padding so wie du es da hast nicht richtig interpretiert. ich habe damit auf jeden fall keine probleme, aber schreibe auch immer padding-left, -right .... Nur so ne idee, kann aber auch an was anderen liegen.

    Nachtrag: Irgendiwe sieht das gar nicht ie auf dem bild aus
     
  8. Julia-DD

    Julia-DD MacUser Mitglied

    Beiträge:
    266
    Zustimmungen:
    4
    MacUser seit:
    21.09.2006
    Such mal nach dem Begriff "box-model" und IE-Hack. Soweit ich weiß, rechnet der IE die Padding und Border Informationen falsch zusammen, deswegen kommen diese ulkigen Darstellungsweisen vor.

    Da gibt es bestimmte Informationen, die du in deine CSS-Datei packen musst, damit IE das auch schnallt. Über Google findet man mit den Begriffen einiges.

    Wäre trotzdem schön, wenn du deine Lösung hier posten könntest :D

    Danke und viel Erfolg,
    Julia
     
  9. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Der Box-Model Bug betrifft lediglich den IE bis v5.5. Ab dem 6er ist alles ok. Eigentlich geht der IE mit Aussenabständen, Rahmen und Innenabständen richtig um.

    Wie man sieht, es es eher ein Problem des positionierten Hintergrundbildes (im Bild ist es der IE v7).

    Lösungsvorschlag -> Mit relativen Angaben arbeiten:

    Code:
    body {
       font-size: 62.5%;
    }
    
    #msg-error {
       font-size: 1.2em;
       ...
       ...
       ...
       background: #ffc8c8 url(img/exclamation.png) no-repeat 0.4em 0.4em;
    }
    
    
    Vielleicht kann ich nachher selber nochmal testen...

    2nd
     
  10. NQUISITOR

    NQUISITOR MacUser Mitglied

    Beiträge:
    615
    Zustimmungen:
    3
    MacUser seit:
    30.08.2003
    Das ist nicht korrekt. Der IE6 - leider immer noch der Browser mit dem grössten Marktanteil - hat den Box-Model Bug und ich plage mich nun schon ewig damit herum. Das ist noch nicht mal alles auch mit 1px dottet Borders macht der IE massiv Probleme. Auch die exakte Positionierung von Listelementen ist eine Qual im IE6. Der IE 7 hat den Box-Model Bug afaik und nach meinen Tests nicht mehr.
     
Die Seite wird geladen...