nicht angemeldet
Hallo Forum,
Ich habe ein Blockelement, das eine Box erzeugt, die sich über das gesamte Fenster ausdehnt.
<body>
<p style="border: 1px outset red;">
...
</p>
</body>
Wenn jetzt in diesem Element sich ein sehr langes Wort befindet, und ich nicht möchte, dass das Element umgebrochen wird, dann geht das Wort im Mozilla 1.3, Opera 6.11 und Konqueror 3.1.1 (IE kann ich im Moment unter Linux nicht testen) gemäß der CSS2-Spezifikation über den roten Rand des Blockelements hinaus; das Blockelement behält aber seine aktuelle Breite. (nämlich die des Fensters)
Hier: http://www.christian-seiler.de/temp/test-element-width-1.html
Das möchte ich aber nicht. Ich möchte, dass das Element, wenn der Inhalt zu groß wird, sich der größe des Inhalts anpasst. Ich habe mir mal die CSS2-Spezifikation nochmal zu Gemüte geführt, genaugenommen die Kapitel 9, 10 und 11. Leider steht da nur, dass sich Mozilla, Opera und Konqueror korrekt verhalten, nicht jedoch, wie ich mein Problem lösen kann.
Mir ist klar, dass bei Tabellenzellen das ganze wie gewünscht funktioniert. Also habe ich mir gedacht, ich könnte ein bisschen CSS "vergewaltigen" und habe folgendes probiert:
html {
width: 100%;
display: table;
margin: 0;
padding: 0;
}
body {
display: table-cell;
width: 100%;
margin: 0;
padding: 0;
color: #000;
background: #fff;
}
Ich schaue mir dann das Ergebnis im Mozilla 1.3 an und freue mich, es klappt so, wie ich es will. Dann starte ich Opera 6.11 und habe schon die erste Enttäuschung: wenn der Inhalt zu groß ist, dann klappt es, wenn der Inhalt dagegen kleiner als die volle Breite ist, dann klappt es nicht mehr. Konqueror bleibt beim Versuch, die Seite zu rendern, gnadenlos hängen.
Hier: http://www.christian-seiler.de/temp/test-element-width-2.html
Als letztes versuche ich noch, die Methode etwas abzuwandeln. Ich packe den Inhalt der ganzen Seite in ein <div>:
<body>
<div id="table-cell">
<p style="border: 1px outset red;">
...
</p>
</div>
</body>
Die CSS-Anweisungen lauten jetzt so:
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
display: table;
margin: 0;
padding: 0;
}
#tablecell {
display: table-cell;
width: 100%;
margin: 0;
padding: 0;
color: #000;
background: #fff;
}
Testseiten hier:
http://www.christian-seiler.de/temp/test-element-width-3.html
(mit nicht umbrechbarem Inhalt)
http://www.christian-seiler.de/temp/test-element-width-4.html
(mit umbrechbarem Inhalt)
Mozilla 1.3 und Opera 6.11 zeigen mir dann das ganze so an, wie ich es will. Konqueror klappt auch wunderbar, *solange* das Fenster kleiner ist, als das Element, sobald das Fenster größer ist, dann ist der Rahmen um das Element nur so groß wie nötig, füllt jedoch nicht die ganze Breite aus.
Ich weiß, semantisches Markup ist was anderes als ein Container-<div> um die ganze Seite, aber ich sehe wirklich keine andere Möglichkeit, außer bei only-for-Mozilla-Seiten.
Und nun zu meinen eigentlichen Fragen:
1. Wie reagieren IE 5 und IE 6? (laut http://www.xs4all.nl/~ppk/css2tests/intro.html verstehen sie kein display: table)
2. Weiß jemand, wie man es Konqueror doch noch beibringen kann?
3. Weiß jemand, wie iCab, OmniWeb und IE5/Mac reagieren?
4. Weiß jemand eine andere (bessere) Lösung? Stehe ich vielleicht auf einem Riesenschlauch?
Viele Grüße,
Christian
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!