nicht angemeldet
Unterschied der Interpretierung verschiedener Browser von padding
Hallo Ihr,
ich sitze nun seit Ewigkeiten vor einem Problem, zu welchem ich immer nur entgegengesetzte Hilfen finde. Am besten erst die Problemschilderung, dann die Fragen dazu:
// Benutzte Test-Browser:
1. IE 6.0
2. Firefox 1.0
3. Netscape 7.2
// Beispiel für optische Definition einer Überschrift:
<style type="text/css">
h1 {
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
background-color: #AF2820;
border: 1px solid #000000;
width: 610px;
padding-left: 15px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
</style>
// im body dann die Überschrift:
<h1>Überschriftendefintion mit CSS</h1>
Nun zum Problem:
das padding-left wirkt sich so wie es soll als Einrückung der Überschrift aus. Nur wirkt sich das padding-left im IE, Netscape und Firefox unterschiedlich aus. Im Firefox und Netscape wird die Länge beeinflusst (um entsprechenden padding-Wert verlängert, im IE nicht.
Ich finde zu diesen Problemen nur Brwoserweichen, was man alles wie trennen kann. Wunderbar, aber wo kann ich ersehen, was denn überhaupt unterschiedlich interpretiert wird, und was nicht? Zusätzlich wäre es natürlich hilfreich, wenn man ebenfalls einen Überblick darüber hätte, was man für welchen Browser entsprechend ändern muss.
Oder kann mir jemand zumindest sagen, was ich gegen mein genanntes Problem tun kann?
Habe das _padding-Problem_ auch noch in nem Zusammenhang mit Listen, aber ich gehe stark davon aus, dass der selbe Grund dafür dahintersteckt!
Gruß Patrick
-
Hallo,
Das Problem ist ein alter "Bekannter" und wird gerne als
"Box-Model_bug" bezeichnet.
Ein Googler oder FAQ-Sucher im Self-Forum nach diesem Begriff sollte bereits einiges dazu ausspucken, z.B. das da:
< http://www.carsten-protsch.de/zwischennetz/doctype/box_model_bug.html>Leider gibt es so etwas wie eine absolute Referenz, was welcher Browser wann kann, nicht (zumindest nicht in voller Vollständigkeit). Mann kann eigentlich nur wild rumtesten, und ggf. solche von Dir angesprochenen Browser-Weichen einbauen - oder einfach alles mit Tabellen layouten...nein, ich habs gesagt *mir-selbst-den-Mund-mit-Seife-auswasch*
Gruesse,
Joerg-
Danke Joerg,
genau das ist auch mein Problem... ich arbeite an einem umfangreichen Portal, dass zugegebenermaßen auf einem Tabellen-Layout basiert. Nun versucht man anständig zu werden und solche Dinge im laufenden Betrieb von Kunden unbemerkt zu ändern. Da dies eh schon ein schwieriges Unterfangen ist, bzw. mit allerlei Test-Seiten verbunden ist, kann es einen echt Nerven kosten, wenn man nur der Zukunft halber und dem W3C zuliebe die Seiten und Inhalte ändert. Und dann halt sich mit solchen Fehlern rumplagen muss... da fragt man sich dann irgendwann wirklich nach Sinn und Zweck. Quasi man möchte, aber man darf nicht, weil man sonst Gefahr läuft pleite zu gehen, wenn man sich mit diesen Dingen aufhält.
Nichtsdestotrotz siegt derzeit noch mein Anstand, der das gern ändern möchte. Wenn du also auch Links zu halben Referenzen hast, wäre ich schonmal sehr dankbar.
Dein Link war zumindest zum Verstehen auch schonmal sehr gut... Vielen Dank hierfür!
Gruß Patrick
-
Moin!
Ich kann dazu nur das Buch "CSS-Praxis" von Kai Laborenz empfehlen. Das Buch ist vor allem eine tolle Referenz zum Nachschlagen. Ich habe es ständig am Computer stehen - trotzdem tauchen natürlich immer mal wieder Probleme auf (siehe mein eigenes Posting etwas höher...), aber es vereinfacht die Sache wirklich sehr.
Zu Deinem Problem:
Der IE interpretiert "padding" falsch: eigentlich sollte gelten, das "width" die Breite des Kastens OHNE Innenabstand (=padding) und OHNE border angibt. Der IE zählt jedoch padding und border DAZU. Du musst den Browser also überlisten. Da gewöhnt man sich aber schnell dran. Beispiel:
#beispiel {
width: 300px;
padding-left: 10px;
border: 10px;
}
/* Das ergibt also bis hierhin einen Kasten mit einer Gesamtgröße von 300px + 10px (padding-left) + 20px (Die 10px-border wird ja auf beiden Seiten, links und rechts des Kastens, dargestellt) = 330px. Damit der IE das richtig interpretiert musst Du ihm diese 330px als width übergeben. Dazu gibst Du jetzt folgendes ein:*/* html #beispiel {
width: 330px;
w\idth: 300px;
}* html lesen nur die IEs aus. Warum aber am Ende noch mal "w\idth:300px"? Weil dies von allen IEs wiederum nur der IE 6.0 lesen kann: Und der hat diesen fehler wiederum nicht...
So, ich hoffe, das funktioniert jetzt auch.
Der Norde
-
Tachchen Der Norde,
ich habe mir den verlinkten Artikel durchgelesen und habe mich insofern halbwegs über das Problem vom box-modell schlau gemacht. Ich konnte das Problem mit einer <!Doctype-Deklaration nun beseitigen und es scheint in allen neueren Browsern tatsächlich die exakt gleiche Optik zu funktionieren.
Nun kommt hier jetzt allerdings ein neues Problem hinzu, weswegen ich irgendwann mal die Deklaration rausgelasen hatte - der Querscrollbalken, wenn eine Tabelle alles ausrichtet. Wo und wie ich das Quer-Scrollbalken-Problem nun in den Griff kriege ist das nächste Problem. Wie gesagt sind unsere Seiten in einigen Versionen am laufen und ich muss das schnell ändern können.
Kannst du mir die ISBN-Nummer mal per eMail schicken oder hier drin posten? Wäre sehr praktisch - dann leg ich mir das Buch in den nächsten Tagen einmal zu.
Gruß Patrick
-
link: [http://www.amazon.de/exec/obidos/ASIN/3898425770/qid=1112807150/sr=8-1/ref=sr_8_xs_ap_i1_xgl/028-5159794-5558929]
Viel Spass damit!
P.S: Hast Du die Seiten in allen IEs getestet (IE 5.0, 5.5, 6.0)? Würde ich nach Deiner Beschreibung mit dem Doctypeswitch mal machen, könnte sein, dass da sonst unbemerkt ein neues Problem auftaucht...
-
Hallo Der.
link: [http://www.amazon.de/exec/obidos/ASIN/3898425770/qid=1112807150/sr=8-1/ref=sr_8_xs_ap_i1_xgl/028-5159794-5558929]
Also das kleine Stückchen nach rechts hättest du das "link:" auch noch schieben können. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days -
Vielen Dank nochmal... dein erster Link hat mich auf jeden Fall schonmal einige Dimensionen weitergebracht... die Erklärung der Box plus ein wenig Suchen in SelfHTML.
Das Problem mit dem Querscrollbalken hat sich nun plötzlich in Luft aufgelöst, obwohl ich nur in kleinen Schritten Änderung hochgeschoben hatte... Was auch immer daran jetzt im positiven Sinne Schuld ist.... das weiß der liebe Herr, ich verstehs nicht... naja, wie dem auch sei, nochmals vielen herzlichen Dank und drückt mir die Daumen, dass ich bei meiner Umstellung nicht wahnsinnig werde ;-)
Gruß Patrick
-
-
-
-
-