Browserweiche: margin

[Gabi]

Hallo zusammen,
ich habe mal eine Verständnisfrage. Bei der Beschreibung der Box-Modelle (Bug) wird folgendes vorgschlagen:

#bereich {
  width:200px; padding:20px; border:20px solid #66a;
}

* html #bereich {  /* nur fuer Internet Explorer */
  width:280px;     /* Version 5.x */
  w\idth:200px;    /* Version 6 */
}

Meine Frage ist nun, was mit einer margin Angabe passiert. Muss ich diese auch dazurechnen? Oder wird die vom IE 5 und 6 ignoriert?

Vielen Dank im voraus :-)
Gabi

[Gunnar Bittersmann]

@@Gabi:

nuqneH

Meine Frage ist nun, was mit einer margin Angabe passiert. Muss ich diese auch dazurechnen? Oder wird die vom IE 5 und 6 ignoriert?

Was du ignorieren kannst, ist IE 5.x. Für viele Zielgruppen kannst duauch IE 6 ignorieren, aber nehmen wir mal an, du willst diesen Uraltbrowser immer noch unterstützen.

Dann solltest du den Quirksmodus vermeiden, also das Standard-Box-Modell verwenden. Damit sollte dein Problem erledigt sein.

SELFHTML ist an der Stelle ziemlich veraltet, und von Hacks wie 'w\idth:200px;' sollte man besser die Finger lassen.

Qapla'

[Cheatah]

Hi,

ich habe mal eine Verständnisfrage. Bei der Beschreibung der Box-Modelle (Bug) wird folgendes vorgschlagen: [...]
Meine Frage ist nun, was mit einer margin Angabe passiert. Muss ich diese auch dazurechnen?

die margin-Angaben hat der IE, zumindest was sein Box-Model betrifft, schon immer richtig angewendet. Hier besteht kein Unterschied zu anderen Browsern.

Da Du, wie Gunnar schon sagte, IE<6 mittlerweile eigentlich immer ignorieren kannst, und da Du selbstverständlich niemals eine Seite in den Quirks-Mode versetzen wirst (außer Du weißt sehr, sehr genau, warum Du das tust), besteht das eigentliche Problem übrigens ohnehin nicht mehr.

Cheatah

[Gabi]

Danke erst mal für die schnellen Antworten :-)

Das heißt also, dass ich mir im Grunde den ganzen Quatsch sparen kann und einfach die normalen Angaben mache? Das wäre super, das würde meine CSS-Datei um einiges Verkürzen.

LG Gabi

[suit]

Danke erst mal für die schnellen Antworten :-)

Das heißt also, dass ich mir im Grunde den ganzen Quatsch sparen kann und einfach die normalen Angaben mache? Das wäre super, das würde meine CSS-Datei um einiges Verkürzen.

Wie die beiden schon sagten: das kommt auf die Zielgruppe an - idR. ist der IE 5.x praktisch ausgestorben, der Internet Explorer 6 kommt bei den meisten meiner Kunden auf rund 3 Prozent.

Wenn man also den Internet Explorer 5.x vernachlässig, kann man den IE 6 ohne Problemem im Standardkonformen Modus betreiben und muss sich nicht um irgendwelche Box-Model-Bugs kümmern, die eigentlich keine sind.

Natürlich braucht der IE 6 ab und zu Extrawürste - aber die sind idR. auf mangelnde Unterstützung für alphatransparente PNG-Dateien zurückzuführen.

[Gunnar Bittersmann]

@@suit:

nuqneH

Natürlich braucht der IE 6 ab und zu Extrawürste - aber die sind idR. auf mangelnde Unterstützung für alphatransparente PNG-Dateien zurückzuführen.

Und Doubled Float-Margin Bug und und und …

http://www.positioniseverything.net/explorer.html

Qapla'

[suit]

Natürlich braucht der IE 6 ab und zu Extrawürste - aber die sind idR. auf mangelnde Unterstützung für alphatransparente PNG-Dateien zurückzuführen.

Und Doubled Float-Margin Bug und und und …

Natürlich - aber das zählt für mich zu den dingen wo kein Hack notwendig ist - wenn irgendwo ein float steht kommt einfach ein display: inline dazu und gut ist, da brauch ich keine Handstände machen oder mich speziell darum kümmern.

http://www.positioniseverything.net/explorer.html

Der klassiker, ja :)

[Gunnar Bittersmann]

@@suit:

nuqneH

Natürlich braucht der IE 6 ab und zu Extrawürste […]
Und Doubled Float-Margin Bug und und und …
Natürlich - aber das zählt für mich zu den dingen wo kein Hack notwendig ist - wenn irgendwo ein float steht kommt einfach ein display: inline dazu und gut ist

Ob man das an sich sinnlose 'display: inline' nun als „Hack“ bezeichnet oder nicht, eine „Extrawurst“ ist es jedenfalls.

da brauch ich keine Handstände machen oder mich speziell darum kümmern.

Na eben doch.

Qapla'

[suit]

Ob man das an sich sinnlose 'display: inline' nun als „Hack“ bezeichnet oder nicht, eine „Extrawurst“ ist es jedenfalls.

Jaja :D

da brauch ich keine Handstände machen oder mich speziell darum kümmern.

Na eben doch.

Das ist für mich "im vorbeigehen" - wenn du zum Bäcker gehst und gleich eine Packung Milch mitnimmst ist das auch kein besonderer Extraaufwand :)

[Gabi]

Sorry, hab erst jetzt den Rest gelesen. Nun verstehe ich auch das mit dem display:inline. Das ist immer noch besser und schneller als diese ganzen Hacks :-)

Vielen Dank, ihr habt mir wirklich sehr geholfen!!!!!

Schöne Restwoche noch
Gabi

[Gabi]

Natürlich - aber das zählt für mich zu den dingen wo kein Hack notwendig ist - wenn irgendwo ein float steht kommt einfach ein display: inline dazu und gut ist, da brauch ich keine Handstände machen oder mich speziell darum kümmern.

Davon höre ich zum ersten mal :-( Ich hab fast in allen flyern irgendwo ein float stehen. Mit display:inline habe ich dann "Ruhe"? Das hört sich doch gut an :-)

http://www.positioniseverything.net/explorer.html

Danke für den Link, sehr interessant :-)

LG Gabi

[suit]

Natürlich - aber das zählt für mich zu den dingen wo kein Hack notwendig ist - wenn irgendwo ein float steht kommt einfach ein display: inline dazu und gut ist, da brauch ich keine Handstände machen oder mich speziell darum kümmern.

Davon höre ich zum ersten mal :-( Ich hab fast in allen flyern irgendwo ein float stehen. Mit display:inline habe ich dann "Ruhe"? Das hört sich doch gut an :-)

Wenn du float in Kombination mit margin-left oder margin-right verwendest löst du diesen Bug mit ziemlicher Sicherheit aus.

http://www.positioniseverything.net/explorer/doubled-margin.html

Das ist eine der gängigen - also einfach sobald du irgendwo ein float notiest ein display: inline dazu und der Bug sucht dich nicht mehr heim.