css wird unterschiedlich angezeigt

vitamin.b · 15.02.2007

hallo liebes forum,

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

?

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

Jass · 15.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

vitamin.b · 15.02.2007

von der optik her könnte man es meinen

wie umgehe ich denn sowas?

Jass · 15.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.

vitamin.b · 15.02.2007

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>

ichamel · 15.02.2007

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

Mephisto_ · 15.02.2007

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

Julia-DD · 15.02.2007

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

Danke und viel Erfolg,
Julia

2nd · 15.02.2007

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

NQUISITOR · 15.02.2007

2ndreality schrieb:
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.

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.

2nd · 15.02.2007

Das Problem mit den gepunkteten 1px Rahmen kenne ich (sind eher Striche).

Zum Bug: Sorry NQuisitor, aber der Bug als solcher besteht nicht mehr im IE ab v6. Kann man überall nachlesen und deckt sich mit meiner Erfahrung. Dabei hängt es vom eingestellten Doctype ab: Im Quirks-Mode gibt es die "alte" Berechnung abweichend von der Spezifikation wie im IE 5 –praktisch der Bug als Feature-, im Standard-Mode funktioniert das Box-Modell wie vorgeschrieben:

Wiki schrieb:
Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations (DTDs). These versions maintain the buggy behaviour when in quirks mode for reasons of backwards compatibility.

Quelle: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Carsten Protsch schrieb:
Der Internet Explorer für Windows bis Version 5.5 und in Version 6 im Quirks Mode hat eine etwas andere Vorstellung vom Box-Modell.

Quelle: http://www.carsten-protsch.de/zwischennetz/doctype/box_model_bug.html

Ergo: Stellst Du Deine Seite auf einen Doctype um, der ein standardkonformes Verhalten erzwingt, hast Du keine Probleme mehr mit dem Box-Modell. Arbeitest Du im Quirks-Mode, hast Du den Box-Model-Bug als Feature. Vom Bug als solchem kann man dabei nicht sprechen. Du hast mit dem DocType die Macht

2nd

vitamin.b · 16.02.2007

danke für eure vorschläge

ich habe jetzt so einiges probiert ...

1. überprüfung der seite auf w3c -> 100% bestanden

2. verwendung von relativen maßangaben

3. unterschiedliche doctypes

alles hat nicht geholfen

jetzt bin ich noch einen versuch nachgegangen, nämlich die verwendung des tantek-hacks

das style sheet muss dafür so aussehen:

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;
	background-position: 10px 10px;
	voice-family: "\"}\""; voice-family:inherit;
	background-position: 5px 5px;
}


html>body .msg-error {
	background-position: 5px 5px;
}

soweit ich die funktionsweise von dem hack verstanden habe wird das kleine bild welches sich im hintergrund befindet auf die position 10, 10 gesetzt (gilt für alle browser) dabei muss ich aber die position angeben die im ie richtig angezeigt wird. danach werden die restlichen browser es aber auch falsch anzeigen und deshalb kommen noch folgende zwei zeilen hinzu:

Code:

	voice-family: "\"}\""; voice-family:inherit;
	background-position: 5px 5px;

die bewirken das der ie ab dieser zeile wegen eines bugs das css nicht weiterliest. die anderen browser haben damit kein problem und überschreiben die position mit 5, 5 was heißt das es im firefox und safari korrekt angezeigt wird.

soviel zur theorie -> praxis: funktioniert (bei mir) nicht

ich komme leider nicht dahinter eine allgemeine lösung dafür zu finden oder ich habe einfach nur nen denkfehler drin ... keine ahnung

bin mittlerweile soweit das irgendwie zu verschachteln, d. h. ein div für den rahmen und ein div für den hintergrund samt icon ... vom quellcode her nicht so schön aber funktioniert

Saugkraft · 16.02.2007

Der IE rechnet anders als Firefox und andere Browser. Korrekt wäre, die Paddings auf die Div-Breite draufzuschlagen, der IE rechnet sie aber von der Div-Breite runter.

So hab ich das gelöst (ist ein konkretes Beispiel von meiner Seite mit den entsprechenden Werten):

Code:

<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
#mainContent #content {
	float: left;
	width: 730px;
	padding: 15px 15px 15px 15px;
	background: #ffffff; 
}
/*]]>*/
</style>
<![endif]-->

Zum Vergleich das orginal CSS:

Code:

#mainContent #content {
	float: left;
	width: 700px;
	padding: 15px 15px 15px 15px;
	background: #ffffff;

Man beachte die unterschiedlichen Breiten.

vitamin.b · 16.02.2007

Saugkraft schrieb:
Der IE rechnet anders als Firefox und andere Browser. Korrekt wäre, die Paddings auf die Div-Breite draufzuschlagen, der IE rechnet sie aber von der Div-Breite runter.

So hab ich das gelöst (ist ein konkretes Beispiel von meiner Seite mit den entsprechenden Werten):

Code:



Zum Vergleich das orginal CSS:

Code:

#mainContent #content { float: left; width: 700px; padding: 15px 15px 15px 15px; background: #ffffff;

Man beachte die unterschiedlichen Breiten.

aha - mit deiner lösung klappts nun

ich hatte anfangs die browserweiche nicht richtig eingebaut aber nun klappts.

css für alle browser inkl. ie (style.css):

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;
	background-position: 5px 5px;
}

css anpassung speziell für den ie (style_ie.css):

Code:

#msg-error {
	background-position: 10px 5px;
}

im html-head steht nun:

Code:

<style type="text/css">
   @import url(cms/core/style.css);
</style>
<!--[if gt IE 5]>
   <style type="text/css">
      /*<![CDATA[*/
         @import url(cms/core/style_ie.css);
      /*]]>*/
   </style>
<![endif]-->

dankeschön

2nd · 16.02.2007

Viel zu kompliziert, ich erreiche das selbe ohne "Browserweiche" mit einer Zeile CSS - siehe unten. Und bis auf den überflüssigen Conditional Comment hat die "Lösung" von Saugkraft nichts zur Behebung des eigentlichen Problems beigetragen, davulb positioniert lediglich das Hintergrundbild für den IE neu und setzt keine anderen paddings oder ähnliches...

saugkraft schrieb:
Der IE rechnet anders als Firefox und andere Browser. Korrekt wäre, die Paddings auf die Div-Breite draufzuschlagen, der IE rechnet sie aber von der Div-Breite runter.

Das stimmt so einfach nicht. Warum schreibe ich eigentlich oben eine Seite Erklärung, wenn wieder fälschlicherweise das Box-Modell als Erklärung herhalten muss?!

Nochmal: Die falsche Berechnung der Breite von Blockelementen inkl. Innenabstand (padding), Rahmen (border) und Aussenabstand (margin) betrifft lediglich den IE bis v5.5. Alle IEs ab v6 machen das richtig - solange man sie im Standardmodus per Doctype-Switch betreibt (also XHTML-irgendwas).

davulb zeigt seinen Screen mit dem IE v7 - das hat nichts mit dem Box-Model-Bug zu tun und auch nicht mit den Paddings und den DIVs. Es betrifft lediglich die Positionierung des Hintergrundbildes per background: ...... Xpx Xpx - so wie ich oben in meinem Posting schon vermutet habe.

Ich habe selber getestet und mit einer zusätzlichen Zeile CSS lässt sich das BG-Bild im IE problemlos positionieren. Die Raute vor der 2. Zeile background verhindert, dass die aktuellen Safaris und FireFoxes diese Zeile interpretieren, der IE macht es. Sprich, es wird das Hintergrundbild via 5px/5px in allen Browsern positioniert - danach positioniert die 2. Zeile ausschliesslich im IE das Bild auf x=10px, da alle anderen modernen Browser diese Zeile nicht ausführen.

Code:

	#msg-error {
		font-family: Arial, Helvetica, Geneva, sans-serif;
		color: #f00;
		border-left: 5px solid #f00;
		padding: 4px 4px 4px 45px;
		background: #ffc8c8 url(apply_f2.png) 5px 5px no-repeat;
		#background: #ffc8c8 url(apply_f2.png) 10px 5px no-repeat;
	}

Unten ein Screenshot mit folgenden Browsern:

• Windows XP mit IE 6 und IE 7
• OS X mit Safari 2 und FireFox irgendwas

2nd

vitamin.b · 16.02.2007

Ich habe selber getestet und mit einer zusätzlichen Zeile CSS lässt sich das BG-Bild im IE problemlos positionieren. Die Raute vor der 2. Zeile background verhindert, dass die aktuellen Safaris und FireFoxes diese Zeile interpretieren, der IE macht es. Sprich, es wird das Hintergrundbild via 5px/5px in allen Browsern positioniert - danach positioniert die 2. Zeile ausschliesslich im IE das Bild auf x=10px, da alle anderen modernen Browser diese Zeile nicht ausführen.

hehe, auch nicht schlecht

das muss man erstmal wissen

Saugkraft · 16.02.2007

2ndreality schrieb:
Das stimmt so einfach nicht. Warum schreibe ich eigentlich oben eine Seite Erklärung, wenn wieder fälschlicherweise das Box-Modell als Erklärung herhalten muss?!

Ganz einfach. Weil ich bisher davon ausging, dass der Bug im IE 6 immer noch verbaut ist. Lag ganz einfach daran, dass ich auf meiner Seite in der ersten Zeile die ?xml Deklaration hab und der IE den Doctype in der ersten Zeile erwartet weil er sonst in den Quirks Mode schaltet. Wusste ich bis eben auch noch nicht.

Im Übrigen halte ich aber nix von CSS Hacks. Dann lieber mit Browserweiche. Weiß nämlich kein Mensch wie CSS Hacks vom nächsten Browser xyz interpretiert werden. Die Abfrage nach IE und Version bezieht sich gezielt auf einen Browser und seine Bugs. Das ist aber eher eine Geschmacksfrage als einer Grundsatzdiskussion wert.

Was mich trotz allem interessieren würde ist die Frage, die hier (wenn es denn nichts mit dem Box Model zu tun hat) noch keiner beantwortet hat. Nämlich: warum positioniert der IE das Hintergrundbild anders?

2nd · 16.02.2007

Saugkraft schrieb:
Im Übrigen halte ich aber nix von CSS Hacks. Dann lieber mit Browserweiche. Weiß nämlich kein Mensch wie CSS Hacks vom nächsten Browser xyz interpretiert werden. Die Abfrage nach IE und Version bezieht sich gezielt auf einen Browser und seine Bugs. Das ist aber eher eine Geschmacksfrage als einer Grundsatzdiskussion wert.

Jup, da hast Du Recht mit den Weichen und den Hacks. Zumal man dann wenigstens einen Style Sheet validieren kann. Wobei ich persönlich bei einer oder zwei Zeilen mit Hacks (mehr brauche ich in der Regel auch nicht) den Aufwand der Conditional Comments scheue und die simplere Variante bevorzuge.

Saugkraft schrieb:
Was mich trotz allem interessieren würde ist die Frage, die hier (wenn es denn nichts mit dem Box Model zu tun hat) noch keiner beantwortet hat. Nämlich: warum positioniert der IE das Hintergrundbild anders?

Wegen einem Interpretationsfehler im IE bei der Berechnung der Position des Hintergrundbildes. Die Spezifikation sagt, dass die Berechung im Contenbereich losgeht (Aussenrand der Innenabstände

), also fernab von margins und borders. Der IE beginnt mit der Positionierung am Rahmen (border).

Das sieht man oben auch auf dem Bild im Ausgangsposting, genau die 5px Dicke der "border" fehlen bei der Positionierung. Gebe ich die dann via Hack zu der Eigenschaft background-position: x + borderBreite dazu, habe ich die gleichen Abstände wie in standardkonformen Browsern. Habe ich keinen Rahmen per border definiert, sieht alles in allen Browsern gleich aus (ohne Hacks).

2nd

Saugkraft · 16.02.2007

Tricky ist es auf jeden Fall. Respekt. Du hast den IE nicht zufällig mitentwickelt?

Ich muss ja auch zugeben, dass ich nicht immer die Weichenversion nehme. Zeit ist ja durchaus manchmal knapp und solange man im Blick behält was man so einbaut seh ich da auch kein Problem. Aber da hakt es eben manchmal. Weil ich von Natur aus bequem bin, lass ich lieber nen alten Browser durch's Raster fallen, als mich für alle Tage an das zu binden was ich mir mal ausgedacht hab. :no:

css wird unterschiedlich angezeigt

vitamin.b

Aktives Mitglied

Jass

Aktives Mitglied

vitamin.b

Aktives Mitglied

Jass

Aktives Mitglied

vitamin.b

Aktives Mitglied

ichamel

Aktives Mitglied

Mephisto_

Aktives Mitglied

Julia-DD

Aktives Mitglied

2nd

Aktives Mitglied

NQUISITOR

Aktives Mitglied

2nd

Aktives Mitglied

vitamin.b

Aktives Mitglied

Saugkraft

Aktives Mitglied

vitamin.b

Aktives Mitglied

2nd

Aktives Mitglied

Anhänge

vitamin.b

Aktives Mitglied

Saugkraft

Aktives Mitglied

2nd

Aktives Mitglied

Saugkraft

Aktives Mitglied