El Supremo: pre-Tag sprengt Layout im IE trotz overflow:scroll

Beitrag lesen

SELF-Forum

pre-Tag sprengt Layout im IE trotz overflow:scroll

El Supremo
– Informationen zu den Bewertungsregeln

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ß.

Beitrag melden
–
Informationen zu den Bewertungsregeln