<pre> Container schmaler als Inhalt

-André-

Erfahrenes Mitglied
Hallo,
ich möchte auf meiner Seite in <pre> Containern SELECT Anfragen für die Datenbank anzeigen lassen.
Die Ausgabe soll etwa wie folget aussehen:
HTML:
<div id="0">
	<table>
...
       </table>
<pre>
SELECT...
</pre>
</div>
mit CSS ist das ganze formatiert:
Code:
table, td, tr, th {
	border: 1px solid #000;
	border-collapse: collapse;
	padding: 0.2em;
}
pre {
	background-color: #ccc;
	border: 2px solid #333;
	padding: 1em;
	color: #000;
}
div {
	border: 2px solid #cc0099;
	padding: 1em;
	margin: 1em;
	float: left;
}

Die Zeilenumbrüche im <pre>-Inhalt werden mit "\n", die Einrückungen mit "\t" gesetzt.

Im IE werden die <pre> Container so dargestellt, dass der inhalt komplett innerhalb des Elements ist, im Firefox ragt er über.

Wie kann ich verhindern, dass der inhalt überragt, aber trozdem komplet angezeigt wird?
 
Hallo,
wenn ich <pre> mit white-space:normal auszeichne, wird der Text zwar nicht mehr über den Rand hinaus geführt, aber die Zeilenumbrüche und Einrückungen werden auch ignoriert.

Danke auch für den Hinweis zu den ID's

Gruß

-André-
 
Dann hättest du nur noch die Möglichkeit, das Element mit overflow:auto zu formatieren, damit der überlange Inhalt nicht über den rechten Elementrand hinausragt, sondern darin gescrollt werden kann.

mfg Maik
 
Zurück