PDA

View Full Version : Problems with PRE tag in IE 7



judikrd
Aug 21st, 2007, 02:37 AM
Hello!

I have researched the problems with the PRE tag in IE, and have added the following code to my CSS style sheet:

pre {
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
overflow:hidden;
}

However, the page still displays as though the text inside the PRE tags were not being wrapped; i.e., it is way wider than the browser window.

I added the following to the PRE style:

min-width:300px;
max-width:600px;

...which causes the text to stay within the 600 pixel boundaries, but the page STILL displays as the same too-wide width, as tho the text were not being wrapped. Now there's just a huge amount of white space to the right of the text.

I tried adding style="overflow:hidden" to the div that contains the PRE tags, but that didn't help either.

I am using IE 7. The page displays perfectly in Firefox, but I must have it display properly in IE as well.

Any help is MUCH appreciated!! I have tried everything and am about to bash my head through a wall (okay... I agree, it's not quite worth that!).

Thank you!

SouthwaterDave
Aug 21st, 2007, 09:38 PM
As far as I am aware IE does not support min-width or max-width properties. The wschools (http://www.w3schools.com/css/css_dimension.asp) site agrees with me too, or we are both out-of-date.

I'm surprised any browser breaks the contents of a <pre> tag anyway. That's one of the reasons for using the tag isn't it?

A possible solution would be to discard the <pre> tag and wrap a <div> around each line. You could still use CSS to render this area in a monospaced font such as Courier.

lithriel
Aug 22nd, 2007, 06:26 AM
As far as I am aware IE does not support min-width or max-width properties. The wschools site agrees with me too, or we are both out-of-date.

Actually IE 7 does support min-width and max-width. I noticed the W3C has not updated all of their pages yet. Well they do have plenty to weed through and update.

Can you assign a normal width declaration to pre?

judikrd
Aug 22nd, 2007, 07:59 PM
Thanks, guys, but FYI, I only added the width properties to see what would happen; I don't really want to use them, because they pretty much invalidate what the PRE tag is for. And what happens is that the text DOES stay within the width BUT the browser window is STILL EXACTLY as wide AS IF the text were there, not being wrapped and not being forced within a width!

If I take the width properties out, then the page is the same width as above, and the text is one long line.

So my question is still, really, why the PRE tag isn't working in IE 7...

judikrd
Aug 23rd, 2007, 02:55 AM
Well, problem is gone! I don't know exactly what it was, but I did have a table around some of the stuff (my quick and dirty way of starting things, sometimes); replaced it with a div and all's well; the text is wrapping the way it should, even in IE 7. Now I have another reason to drop tables... !

Thanks, SouthwaterDave and Lithriel!