A scrollable DIV containing a PRE IE6

PRE isn't isn't skipped when using center in IE6

[mmichalsky]

Hello!

I have a problem concerning the PRE-tag. As I understood it, the inner text will just be left out and will not be rendered. But, when I use CSS 'text-align: center;' or HTML 'align="center"' the text within the PRE-tag is centered. I already tried to "display: block;" it and put a DIV around it and even a table, but the text won't be left out as it comes to the rendering. When I use a left alignment in the DIV-tag the table cell is also aligned left.

Can anybody help? Thanx!

<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td style="text-align: center;"><div id="mainDiv" style="display: block; width:100%; height: 780px; overflow-y:scroll;">
 <pre>7: 55%
8: 68%
END NC NL</pre>
 </div></td>
 </tr>
</table>

[tedster]

Welcome to the forums.

Not sure I understand the rendering you are looking for here - do you want a BLOCK of left-aligned and preformatted text, but the block itself is centered?

[mmichalsky]

Yes, you understood me right ;)

[DrDoc]

Yes, welcome to Webmaster World!

The reason why it doesn't work is because you're specifying

text-align:center

, and that does exactly that -- centers text. This CSS property (text-align) does not affect block level elements (such as divs and paragraphs). It only centers inline content (such as text).

"Now wait a minute! The div in my example is centered!" You're right... But that's a bug in Internet Explorer.

What you should do, to ensure cross-browser compatibility, is this: (changes in bold)

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center;"><div id="mainDiv" style="margin: 0 auto; text-align: left; display: block; width:100%; height: 780px; overflow-y:scroll;">
<pre>7: 55%
8: 68%
END NC NL</pre>
</div></td>
</tr>
</table>

[mmichalsky]

Thanks for your reply!

I tried it and built it in, but unfortunately it doesn't work for me. The text aligned left in the end again. I thank you for the information on inline and block elements! Gave me a new view.

[DrDoc]

My bad... Change the width on the div to whatever you want it to be... 300px, for example.

[mmichalsky]

I used a second DIV and built in your hint and that one worked! Thanks a lot for your help!

<td rowspan="2" align="center" class="PortletBorderLeftBottom">
 <div style="width: 100%; height: 100%; overflow-y: scroll;">
 <div style="width: 40px; height: 100%;">
 <pre style="text-align: left;" id="kasseOut" class="kassenstreifen" name="kasseOut">7: 55%
4: 62% <= AKTIV
8: 68%
5: GASTRO
ENDE NC NL</pre>
 </div>
 </div>
</td>