pre-Tag sprengt Layout im IE trotz overflow:scroll
El Supremo
0
pre-Tag sprengt Layout im IE trotz overflow:scroll
El Supremo
Guten Abend und einen guten Start ins Wochenend erstmal!
Ich habe ein kleines Problem mit einem pre-Tag. Zur Konstruktion:
Das <pre> befindet sich in einer Tabellenzelle (ich weiß, dass es ansich nicht korrekt ist, eine Tabelle als Layoutmittel zu missbrauchen, doch bitte nehmt das für diese Fall einfach als gegeben hin). Das Problem tritt nur auf, wenn die Tabellenzelle keine oder eine prozentuale Breite zugewiesen bekommt und auch das <pre> selbst keine oder einer prozentuale Breite hat.
So, nun zum eigentlichen Problem: dem Tag wird per CSS die Eigenschaft "overflow:scroll" zugewiesen, die Tabellenzelle dürfte also nicht gesprengt werden, wenn der Inhalt des <pre> Breiter als die Zelle ist. Aber genau das passiert im IE6 und 7: das <pre> erhält zwar einen horizontalen Scrollbalken, doch trotzdem wird es nicht so schmal, dass es in die Tabellenzelle passt. Darum entsteht noch ein zweiter horizontaler Scrollbalken, der das gesamte Fenster scrollt.
Zum besseren Verständnis, falls nötig, hier noch ein Beispiel:
HTML:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>pre - Test</title>
<link rel="stylesheet" type="text/css" href="pretest.css">
</head>
<body>
<table>
<tr>
<td>
<pre>Lorem ipsum cu pro iuvaret albucius ponderum. Ne pri doming nominavi. Eu autem animal quo. Ea tollit facete prodesset qui, ei inani indoctum has.</pre>
</td>
</tr>
</table>
</body>
</html>
CSS dazu:
html
{
width:100%;
}
pre
{
width:80%;
color:#000066;
background-color:#DFDFDF;
padding-left:9px;
padding-right:9px;
margin-left:auto;
margin-right:auto;
overflow:scroll;
font-family:monospace;
}
Ich würde mich über Hilfe sehr freuen, da ich leider kein Stück mehr weiter weiß.
-
Ich habe ein kleines Problem mit einem pre-Tag.
Fixe Breiten oder gar Scrolling sind mit folgendem CSS-Gepansche nicht erforderlich, da überlange Zeilen wie gewöhnlicher Text umbrechen:
pre { white-space:pre-wrap; /* CSS3 */ white-space:-moz-pre-wrap; /* Gecko */ white-space:-pre-wrap; /* Opera 4-6 */ white-space:-o-pre-wrap; /* Opera 7+ */ word-wrap:break-word; /* IE 5.5+ */ }In Summe ist das die stabilste und schönste Lösung.
Roland
-
Hallo,
und danke dir für die Antwort.Fixe Breiten oder gar Scrolling
Naja, ich will ja eigentlich auch keine fixe, sondern eine relative Breite (80%). Gegen das horizontale Scrolling hätte ich ansich garnichts, wenn nur die <pre> Tags scrollen würden.
pre {
white-space:pre-wrap; /* CSS3 /
white-space:-moz-pre-wrap; / Gecko /
white-space:-pre-wrap; / Opera 4-6 /
white-space:-o-pre-wrap; / Opera 7+ /
word-wrap:break-word; / IE 5.5+ */
}Leider funktioniert das im IE6 nicht, was im IE7 ist kann ich im Moment nicht testen. Der IE6 bricht so weder die Zeilen um, noch gibt es einen horizontalen Scrollbalken in dem <pre>. Außerdem wäre mir eigentlich eine Lösung mit validem CSS am liebsten... Gibts vielleicht noch andere Ideen?-
Hallo,
entschuldigt bitte, dass ich den Thread hier "hochpushe", aber nach zwei Tagen fürchte ich, er könnte sonst untergehen.
Ich selbst bin mit dem Problem leider noch nicht weiter gekommen. Wenn ich ein <pre> ohne Breite oder mit prozentualer Breite und
overflow:scroll;in eine Tabellenzelle stecke, die ebenfalls keine oder eine prozentuale Breite hat, dann scrollt nicht nur das <pre>, sondern auch die ganze Tabelle quer, wenn der Inhalt des <pre> zu breit ist. Dies tritt aber nur im IE6 und IE7 auf.Der CSS Vorschlag von Orlando hat im IE leider auch nicht funktioniert.
Ich bitte um Hilfe, da ich selbst nicht weiter komme.
-
-