nicht angemeldet
Unterschiedliche Breiten bei IE 6/ Mozilla
Hallo nochmal!
Ich glaube kaum, dass ihr mir hier helfen koennt (da sind wohl eher die Browserentwickler gefragt) aber vielleicht kennt ja jemand einen Trick.
Ich habe eine Flaeche (<div>), deren StyleSheet-Angaben sehen wie folgt aus:
Position: relative;
Width: 140px;
Padding: 2px;
Padding-Left: 10px;
Padding-Top: 0px;
Padding-Bottom: 12px;
Mit dem IE ist die Flaeche nun genau 140px breit (naja, davon gehe ich zumindest aus), wobei der Mozilla offensichtlich die 10 Pixel noch dazuaddiert. Den Linksabstand kann ich aber auch auf keinen Fall entfernen, also wie bekomme ich das nun hin, dass die Flaeche in beiden Browsern gleich gross angezeigt wird?
Ich werd es jetzt erstmal so akzeptieren, dass es in beiden Browsern unterschiedlich aussieht aber vielleicht kann ich das ja auch noch verhindern.
Ein ratloser Spark
-
Ich hab's.
Einfach noch einen <div> drumherum mit der entsprechenden Breite und "Overflow: hidden".
Sorry fuer das verfruehte Posting, aber das habe ich jetzt eigentlich auch nur durch Zufall herrausgefunden.Spark
-
Hallo nochmal!
Ich glaube kaum, dass ihr mir hier helfen koennt (da sind wohl eher die Browserentwickler gefragt) aber vielleicht kennt ja jemand einen Trick.
Ich habe eine Flaeche (<div>), deren StyleSheet-Angaben sehen wie folgt aus:
Position: relative;
Width: 140px;
Padding: 2px;
Padding-Left: 10px;
Padding-Top: 0px;
Padding-Bottom: 12px;Mit dem IE ist die Flaeche nun genau 140px breit (naja, davon gehe ich zumindest aus), wobei der Mozilla offensichtlich die 10 Pixel noch dazuaddiert. Den Linksabstand kann ich aber auch auf keinen Fall entfernen, also wie bekomme ich das nun hin, dass die Flaeche in beiden Browsern gleich gross angezeigt wird?
Ich werd es jetzt erstmal so akzeptieren, dass es in beiden Browsern unterschiedlich aussieht aber vielleicht kann ich das ja auch noch verhindern.Wieder ein Fall, wo der IE leider falsch liegt in der Interpretation der W3C-Spezifikationen, bzw. es gibt da keinerlei Interpretationsspielraum.
Was dich interessieren dürfte:
1. Das Box-Modell: Wo sitzen die Abstände, die du definierst? http://www.w3.org/TR/CSS2/box.html#box-dimensions (Schöne Grafik, die genau zeigt, wie padding, border und margin um den Inhalt herumgeschachtelt werden.)2. Und wie paßt "width" da rein? http://www.w3.org/TR/CSS2/visudet.html#propdef-width
Zitat: "This property specifies the content width of boxes generated by block-level and replaced elements."Width bestimmt also im Box-Modell die Breite des Content. Zusätzlich werden noch die Breiten für padding, border und margin addiert, sofern nicht Null, was dann eine Gesamtbreite ergibt.
Der IE macht Müll, weil er (was die Entwickler vielleicht logisch fanden, aber irrelevant ist) width als eine andere Breite betrachtet.
Bleibt also, wenns allzu schrecklich aussieht, wieder mal nur die Möglichkeit, dem IE eine passende CSS-Datei vorzusetzen.
BTW: Geh mal mit IE und Netscape 6/Mozilla/Opera auf http://www.w3.org/Style/CSS/ und vergleiche. Und schmeiß danach den Browser weg, der am wenigsten von diesen standardgerechten Seiten darstellen kann...
- Sven Rautenberg
-
Hallo !
Der IE macht Müll, weil er (was die Entwickler vielleicht logisch fanden, aber irrelevant ist) width als eine andere Breite betrachtet.
Zur Ehrenrettung des IE sei hier angemerkt, dass er die Breite der Box im sog. "standards-compliant-Mode" ebenfalls korrekt berechnet.
Die Lösung des Problems besteht also in einer korrekten Dokumententyp-Angabe incl. URL.
z.B.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Mit dieser Angabe verhalten sich Opera 6, Mozilla 0.9.7 und auch IE 6 identisch (zumindest, was die Berechnung des Box-Modells anbelangt.)
Vorsicht: Bei XHTML-Dokumenten sollte man auf die XML-Definition zu Beginn verzichten, da der IE6 dödeligerweise ansonsten nicht in den "Standards-compliant-Mode" schaltet. :-(
Gruß,
kerki
-
Zur Ehrenrettung des IE sei hier angemerkt, dass er die Breite der Box im sog. "standards-compliant-Mode" ebenfalls korrekt berechnet.
Aber wohl nur der IE 6.
Die Lösung des Problems besteht also in einer korrekten Dokumententyp-Angabe incl. URL.
z.B.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Box-Breiten-Test</title>
</head>
<body>
<h2>Box-Breiten-Test</h2>
<div style="width:100px; padding:5px; border:solid blue 10px; margin:20px; background:yellow;">
<img src="nix.gif" width="100" height="20" alt="nix" border="0">
</div>
<div style="width:100px; padding:5px; border:solid red 10px; margin:20px; background:yellow;">
100 Pixel
</div>
</body>
</html>Mit dieser Angabe verhalten sich Opera 6, Mozilla 0.9.7 und auch IE 6 identisch (zumindest, was die Berechnung des Box-Modells anbelangt.)
Obiges Beispiel erzeugt in Opera etc. zwei exakt gleichbreite Boxen, während IE 5.0 (nur den habe ich gerade parat) rumzickt und die untere Box INSGESAMT 100 Pixel breit macht (inklusive Rand), während die obere Box durch die 100 Pixel breite Grafik erzwungenermaßen einen 100 Pixel breiten Content hat, plus Rahmenpixel.
Vorsicht: Bei XHTML-Dokumenten sollte man auf die XML-Definition zu Beginn verzichten, da der IE6 dödeligerweise ansonsten nicht in den "Standards-compliant-Mode" schaltet. :-(
Ich habe den Eindruck: Ob nun "standards-compliant" oder nicht, IE interpretiert CSS falsch, und aus damit.
- Sven Rautenberg
-
Ahjo, danke euch beiden!
Dass IE5 Muell ist weiss ich auch. :) Von IE6 hatte ich mehr erwartet, dass mit dem Kompatibilitaetsmodus war ein guter Tip. Die Angabe fehlte bei mir noch.
Die besten Erfahrungen mit CSS habe ich bisher uebrigens mit dem KDE Browser Konqueror gemacht. Der ist nicht nur beinahe ebenso zuverlaessig wie Mozilla, sondern dazu noch sehr schnell. Z.B. auf der W3C CSS Seite ist das Seitenscrolling mit Mozilla leider noch unertraeglich langsam. :( Konqueror lacht darueber und zeigt auch noch das "Floating" Menue sehr schoen transparent an.
Beeindruckent und ich hoffe, dass der Browser auch einmal fuer Windows verfuegbar sein wird...Gruss,
Spark
-
-
-