Größenprobleme mit verschachtelten Divs

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

wieder ein Problem, an dem ich mir zur Zeit die Zähne ausbeisse.

Ausgangslage:

Ein x-Belibiges Div mit x-beliebiger Breite. In dieses Div soll nun ein weiteres Div eingefügt werden, daß das umgebende (erste) genau ausfüllt, aber einen linken Rand fester Breite hat.

Beispiel:

Das erste Div hat eine Breite von 400 px, das zweite Div muß dann eine Innenbreite von 400 px abzüglich der Randbreite haben.

Problem:

Wenn man beim inneren Div nur den linken Rand von 100 px angibt, dann füllt der Internetexplorer das erste Div mit dem 2. Div auf. Beim Mozilla dagegen hat das zweite Div lediglich mal die Breite des Randes, weil keine explizite Breite angegeben wird. Also kein Auffüllen nach rechts.
Wenn ich nun aber als width 100 % angebe, dann ist das 2. Div 500 px groß, da ja 100% anscheinend sagen, so groß wie das umgebende Div zuzüglich des Randes.

Kann mir wer sagen, wie man das lösen kann, ohne für das innere Div feste Größenangaben zu machen, weil das über ein Standard-Stylesheet in diverse äussere Divs flexibler Größe eingefügt werden muß. Ich bräuchte also eine angabe im Stil 100% - Randbreite.

Gruß

Thomas

#2

Hallo Thomas,

Wenn man beim inneren Div nur den linken Rand von 100 px
angibt, dann füllt der Internetexplorer das erste Div mit dem
2. Div auf. Beim Mozilla dagegen hat das zweite Div lediglich
mal die Breite des Randes, weil keine explizite Breite
angegeben wird. Also kein Auffüllen nach rechts.
Wenn ich nun aber als width 100 % angebe, dann ist das 2. Div
500 px groß, da ja 100% anscheinend sagen, so groß wie das
umgebende Div zuzüglich des Randes.

Du hast es hier mit dem sog. Box-Model-Bug des IE zu tun. Genauere Erläuterung und Lösungsansätze findest Du hier: http://www.parterremedia.de/csswork/css-box-modell/i….

Schöne Grüße
Yasmin

#3

Hallo Yasmin,

Du hast es hier mit dem sog. Box-Model-Bug des IE zu tun.
Genauere Erläuterung und Lösungsansätze findest Du hier:
http://www.parterremedia.de/csswork/css-box-modell/i….

Ich bin nicht ganz sicher, daß es sich hierbei um dieses Problem handelt. Bei diesem Bug geht es ja, so wie ich das herausgelesen hätte darum, daß der Internetexplorer die Größe eines Elements anders bewertet als die anderen Webbrowser. Hier habe ich aber kein Größenproblem, sondern es wird prinzipiell mal ganz anders behandelt. Im einen Fall ergibt ein leeres Element ohne Breitenangabe mal einfach „nichts“, auch keinen farbigen Hintergrund und im anderen Fall gibt ein leeres Element ohne Breitenangabe ein Element, das sich genau an die maximale Größe des umschließenden Elements anpasst.
Hier würde ich eine Einstellung suchen, mit der ich letzteres Verhalten erzwingen kann.
100% funktioniert schon mal nicht, da das Element ja incl. aller Ränder und Abstände genau die Breite des übergeordneten Elemnts annehmen soll. Bei 100% wäre das inner Elemnt ja größer, da ja dann die 100% für den Inhalt des Elements genommen würden und da kommen dann die Ränder ja noch hinzu.

Gruß

Thomas

#4

Hallo Thomas,

Ich bin nicht ganz sicher, daß es sich hierbei um dieses
Problem handelt.

Ich bin mir inzwischen nicht mehr ganz sicher, was überhaupt das Problem ist. :smile:

Also, verstehe ich das richtig, Du hast folgende Konstellation:

  • ein umgebender Container, der z.B. 400px breit ist.
  • ein enthaltener Container ohne Inhalt, der den umgebenden Container bis auf einen Links-Abstand von 100px vollständig ausfüllen soll.

#box1 {
background-color:#FF0000;
width:300px;
height:50px;
padding-left:100px;
}

#box2 {
background-color:#000;
color:#fff;
width:100%;
height:100%;
}

Wenn alle Browser das Box-Model korrekt verstehen würden, wäre so alles gut. Der IE tut so aber nicht, daher benötigt man einen Box-Model-Hack. Oder nicht?

Hier habe ich aber kein Größenproblem, sondern es wird
prinzipiell mal ganz anders behandelt. Im einen Fall ergibt
ein leeres Element ohne Breitenangabe mal einfach „nichts“,
auch keinen farbigen Hintergrund und im anderen Fall gibt ein
leeres Element ohne Breitenangabe ein Element, das sich genau
an die maximale Größe des umschließenden Elements anpasst.

Das kann ich so nicht nachvollziehen. Mir mir ergibt (im IE 6.0 und im FF 1.5) ein Element ohne Inhalt und ohne Höhen- und Breiten-Angabe in beiden Fällen ‚nichts‘. Finde ich auch, frei nach dem Motto ‚von Nichts kommt nichts‘, vollkommen einleuchtend. Sobald Dein Element keinen Inhalt hat, MUSST Du eine Höhen- und Breiten-Angabe machen und dann bist Du wieder beim Box-Model-Bug.

Oder habe ich Dich insgesamt falsch verstanden? Geht’s immer noch um die Robert-Sommer-Seite (mein Beileid übrigens zu dieser Aufgabe!)? Könntest Du ggf. mal einen Seitenbereich benennen, auf den das Problem zutrifft?

Schöne Grüße
Yasmin

1 Like
#5

Hallo Yasmin,

Ich bin mir inzwischen nicht mehr ganz sicher, was überhaupt
das Problem ist. :smile:

Wenn es nur nicht so schwer wäre, jemandem etwas in kurzen Sätzen zu erklären, bei dem ein riesiger Gedankengang dahintersteht.

Also, verstehe ich das richtig, Du hast folgende
Konstellation:

  • ein umgebender Container, der z.B. 400px breit ist.
  • ein enthaltener Container ohne Inhalt, der den umgebenden
    Container bis auf einen Links-Abstand von 100px vollständig
    ausfüllen soll.

#box1 {
background-color:#FF0000;
width:300px;
height:50px;
padding-left:100px;
}

#box2 {
background-color:#000;
color:#fff;
width:100%;
height:100%;
}

Wenn alle Browser
das Box-Model korrekt verstehen würden, wäre so alles gut. Der
IE tut so aber nicht, daher benötigt man einen Box-Model-Hack.
Oder nicht?

Fast richtig. Nur mit der winzigen Kleinigkeit, daß ich nicht beim ersten Container Padding angeben kann, sondern beim zweiten Container einen linken Rand benötige. Mit Padding im ersten Container könnte ich natürlich problemlos 100% beim zweiten Container angeben, aber so…

Das kann ich so nicht nachvollziehen. Mir mir ergibt (im IE
6.0 und im FF 1.5) ein Element ohne Inhalt und ohne Höhen- und
Breiten-Angabe in beiden Fällen ‚nichts‘. Finde ich auch, frei
nach dem Motto ‚von Nichts kommt nichts‘, vollkommen
einleuchtend. Sobald Dein Element keinen Inhalt hat, MUSST Du
eine Höhen- und Breiten-Angabe machen und dann bist Du wieder
beim Box-Model-Bug.

Ja, und da waren sie wieder meine Probleme…
Ich kann keine Breitenangabe machen, weil ich ja schließlich keinen Ausdruck für 100% abzüglich Rahmenbreite habe. :frowning:

Oder habe ich Dich insgesamt falsch verstanden? Geht’s immer
noch um die Robert-Sommer-Seite (mein Beileid übrigens zu
dieser Aufgabe!)? Könntest Du ggf. mal einen Seitenbereich
benennen, auf den das Problem zutrifft?

Ja, es geht leider immer noch um genau dieses Projekt. Leider geht es inzwischen nicht mehr nur darum, daß diese Seite der Öffentlichkeit gezeigt werden soll, nein viel schlimmer, mir wurde inzwischen mitgeteilt, daß es demnächst eine ofizielle Bewertung dieser Seite durch die Presse geben soll, in der mehrere Journalisten die Seite auf Optik, Bugs und sonstige Unschönheiten testen. :frowning:
Eigentlich geht es ja um die komplette Seite, da ich diese verschachtelten DIVs über die komplette Seite gestülpt habe um so eine Möglichkeit zu haben, eine Mindestbreite für den IE zu simulieren.
Die Anleitung dazu habe ich aus einem vorherigen Thread erhalten und steht unter http://www.cssplay.co.uk/boxes/minwidth.html nachzulesen. Nur irgendwie klappt das gar nicht so einfach.
Im Internetexplorer wird es jetzt mal richtig angezeigt, allerdings beim Mozilla wurde aus der Mindestbreite eine feste Breite und der Opera macht nur noch Mist.
Ich denke aber mal, das liegt genau daran, daß beide ein Problem damit haben, wenn für die DIVs keine Breite angegeben werden kann.
Vielleicht habe ich ja auch noch irgendwo anders einen Fehler drin, den ich partout nicht finde. :frowning:

Ich wäre also schon mal sehr froh, wenn mir irgendwer ein wenig unter die Arme greiffen könnte und mir ein paar Tips dazu geben kann.

Gruß

Thomas

#6

Hallo Thomas,

Die Anleitung dazu habe ich aus einem vorherigen Thread
erhalten und steht unter
http://www.cssplay.co.uk/boxes/minwidth.html nachzulesen. Nur
irgendwie klappt das gar nicht so einfach.

schalte die Seite mal in den Quirks-Modus (http://de.selfhtml.org/css/formate/box_modell.htm#do…). Soll zumindest laut Anweisung so gemacht werden.

Darf ich mal vorsichtig etwas fragen? Wäre es nicht unkomplizierter, die Seite einfach neu zu bauen? Ich meine, Du bastelst an dem Ding seit mindestens acht Tagen rum - in höchsten zwei Tagen hätte man doch einfach vernünftige Sourcen dazu schreiben können. Ich weiß, das ist jetzt wahrscheinlich nicht das, was Du hören willst, aber bei dem CSS-Chaos steigt ja echt keine Sau durch.

Mitleidige Grüße
Yasmin

#7

Hallo Yasmin,

schalte die Seite mal in den Quirks-Modus
(http://de.selfhtml.org/css/formate/box_modell.htm#do…).
Soll zumindest laut Anweisung so gemacht werden.

Wenn Du weiter unten schaust, dann gibt es eine Variante 2 für den „normalen“ Modus. Zumindest, wenn ich das richtig interpretiert habe.

Darf ich mal vorsichtig etwas fragen? Wäre es nicht
unkomplizierter, die Seite einfach neu zu bauen? Ich meine, Du
bastelst an dem Ding seit mindestens acht Tagen rum - in
höchsten zwei Tagen hätte man doch einfach vernünftige Sourcen
dazu schreiben können. Ich weiß, das ist jetzt wahrscheinlich
nicht das, was Du hören willst, aber bei dem CSS-Chaos steigt
ja echt keine Sau durch.

Wenn es nur 8 Tage wären, dann wäre ich ja schon froh :smile: Ja, im Prinzip gebe ich Dir vollkommen Recht. Leider muß ich ja erst mal komplett durchsteigen, damit ich es neu machen kann. Vor allem stehe ich hier ziemlich unter Zeitdruck und ich hätte schon mal versucht, das Ding einfach im Grobstil abzuändern und nachzubessern. Allerdings sitzt Du leider ein wenig länger als nur 2 Tage dran, die CSS-Datei neu mit allen benötigten Formatierungen aufzubauen. Langfristig spiele ich mich allerdings schon mal mit dem Gedanken. Leider muß ich nun erst mal den Wahlkampf überstehen, da habe ich weder die Zeit noch den Nerv dazu auch noch mal alles komplett neu aufzusetzen.
Es wäre schon mal schön, wenn es ein Freewareprogramm geben würde, mit dem man den HTML-Code Element für Elemnt durchgehen könnte und es würde einem angezeigt, welche Formatierungen aus welcher Quelle zum Tragen kommen. Bei Mozilla ist ja schon mal sowas in dieser Richtung dabei.

Alles in Allem bleibt mir momentan wahrscheinlich nichts anderes übrig, als zu versuchen durchzukommen und Kleinigkeiten abzuändern, damit das Layout wirklich genau so passt, wie ich es haben will.
Darum wäre ich ja auch heilfroh, wenn irgendwer diesen blöden Fehler entdeckt.

Gruß

Thomas