[CSS] Problem mit relativer Breite

[alcaeus]

Ja, ich hatte heute wieder mal einen WTF-Moment.

Ich habe ein div, welches 50% breit und zentriert ist. Das div hat ein Padding von 1em auf allen Seiten, und einen roten Hintergrund.
Eingebettet in dieses div liegt ein weiteres, welches 100% der Breite hat, und wiederum ein padding von 1em, sowie einen gruenen Hintergrund.

Jeder der sich ein bisschen mit HTML/CSS auskennt, weiss was man dann eigentlich erwarten wuerde.

Vorgestellt?

Eingepraegt?

Ja, dann guckt euch das an: http://files.alcaeus.org/ihatecss.html
Das Ding sieht uebrigens im IE und Firefox exakt identisch aus; da sind keine Float-Spielereien drin, nichts besonderes, und die Seite ist auch komplett XHTML 1.1 valide.

Ok, nachdem ich ja nicht laestern sondern fragen will: hatte jemand schon so ein Problem, und weiss wie man es umgehen kann? BTW, die beiden verschachtelten Boxen sind momentan nur deshalb so da, weil ich die zweite Box, die darin liegen soll ausgeblendet habe, um das mit der Breite zu testen. Warum wird die Breite des Elternelements inklusive Padding genommen, und nicht wie man erwartet ohne? :gruebel:

Greetz
alcaeus

[joachimd]

padding:0;
in den #floater sollte das Problem lösen (sofern ich es richtig erkannt habe...)

[alcaeus]

Ja, aber das ist nicht was ich will. Die innere Box muss ein padding haben, ich will nicht dass der Text extremst am Rand klebt.

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder? :gruebel:

Greetz
alcaeus

[joachimd]

Zitat:

Zitat von alcaeus

Ja, aber das ist nicht was ich will. Die innere Box muss ein padding haben, ich will nicht dass der Text extremst am Rand klebt.

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder? :gruebel:

Wenn ich das in meinem Firefox richtig erkannt habe, ist width die Textweite, das Padding wird drumherum gepackt. Teste mal, indem Du folgendes unter Deine DIVs setzt:

<TABLE width=100% border=1>
<TR>
<TD width=25%> hallo </TD>
<TD width=50%> hallo </TD>
<TD width=25%> hallo </TD>
</TR>
</TABLE>

[alcaeus]

Du scheinst recht zu haben...die Tabelle wird sauber verpackt.

Ja, und was kann ich dagegen machen? Das ist irgendwie zum...aehm...kotzen :wall:

Greetz
alcaeus

[joachimd]

Zitat:

Zitat von alcaeus

Du scheinst recht zu haben...die Tabelle wird sauber verpackt.

Ja, und was kann ich dagegen machen? Das ist irgendwie zum...aehm...kotzen :wall:

Greetz
alcaeus

ich würde es Dir gerne sagen...bin selber oft am Verzweifeln mit CSS...dabei ist vieles mit einem Tabellendesign viel einfacher...

[idontwantaname]

Zitat:

Zitat von alcaeus

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder? :gruebel

Laut dieser Seite zumindestens interpretieren sie es leider "richtig"

[jfheins]

Ich fürchte wohl, du muss folgendes schreiben ;)

Code:

#floater {
      padding:1em;
      width:100%-2em; /* 100% minus 2 mal padding des Elternelements */
      background-color:green;
      border:1px solid black;
   }

[alcaeus]

Zitat:

Zitat von idontwantaname

Laut dieser Seite zumindestens interpretieren sie es leider "richtig"

:roll: Na toll, das freut einen so richtig.

Zitat:

Zitat von jfheins

Ich fürchte wohl, du muss foolgendes schreiben ;)

Du machst Witze, oder? Das geht ja tatsaechlich...wenn mich meine Freundin nicht dafuer umbringen wuerde, wuerde ich dich kuessen :lol:
Weisst du noch, in welchen Browsern das funktioniert, bzw. was ich da sonst noch machen kann?

Greetz
alcaeus

[jfheins]

Das sollte in allen Browsern funktionieren (CSS-Standard :) ) bis auf ...

Ichb glaube der IE6 hat Probleme bei der neuberechnung, wenn du die Breite noch mit Javascript änderst ... ich schau mal nach ;)

[alcaeus]

Zitat:

Zitat von jfheins

Ichb glaube der IE6 hat Probleme bei der neuberechnung, wenn du die Breite noch mit Javascript änderst ... ich schau mal nach ;)

Danke...nachdem naemlich meine XP-VM abgekackt ist, hab ich gar keinen IE6 mehr zum testen :lol:

Greetz
alcaeus

[jfheins]

Ich find das jetzt nicht mehr aber ich bin mir sicher, dass das Mischen von absoluten mit relative Angaben geht ...

Nen IE6 hab' ich leider auch nicht mehr ;)

[Mystic]

Standardkonform gehören Padding und Border nicht zur Breite/Höhe des Elements.

Zitat:

Zitat von jfheins

Ich fürchte wohl, du muss folgendes schreiben ;)

Code:

#floater {
      padding:1em;
      width:100%-2em; /* 100% minus 2 mal padding des Elternelements */
      background-color:green;
      border:1px solid black;
   }

Das funktioniert nicht. Der Browser ignoriert die fehlerhafte Breitenangabe. Dadurch kommt der Defaultwert zum Einsatz (width: auto;). Dass das hier so aussieht, als würde es funktionieren, ist reiner Zufall.

[alcaeus]

Zitat:

Zitat von Mystic

Das funktioniert nicht. Der Browser ignoriert die fehlerhafte Breitenangabe. Dadurch kommt der Defaultwert zum Einsatz (width: auto;). Dass das hier so aussieht, als würde es funktionieren, ist reiner Zufall.

Dass da was nicht ganz funktioniert war mir klar; ein paar fehlerhafte Anzeigen hat das schon hervorgerufen. Ich werd mir da wohl noch ein paar Dinge ueberlegen muessen :cry:

Greetz
alcaeus

[jfheins]

Zitat:

Zitat von Mystic

Das funktioniert nicht. Der Browser ignoriert die fehlerhafte Breitenangabe. Dadurch kommt der Defaultwert zum Einsatz (width: auto;). Dass das hier so aussieht, als würde es funktionieren, ist reiner Zufall.

Toller Zufall http://dpchat.dpexperte.de/smileys/icon_mecker.gif

Naja ... stell ihn einfach auf auto :mrgreen:

[cruiser]

hrm... so ein Div müsstest du doch eigentlich gar nicht mit einer Breite setzen, da ein div nach meiner Erfahrung standardmäßig die maximale verfügbare Breite (incl. Paddings) nutzt...


oder nich? :gruebel: