Forum Moderators: travelin cat
I have been using the <pre> tag for quite some time on one of my sites. I will generally place 200-300 words in the <pre> tag and, until now, have noticed no problems with this method at all. The word wrapping works perfectly and everything stays within it's parent <div> without <p> or <br> tags. Cool!
Until now. A colleague has noticed a serious issue while visiting the site from home with a Mac with IE5. The word wrapping is not working at all, leaving us with massive lines of text that create ugly horozontal scrollbars. This happens on Opera & Mozilla too, but is easily fixed with some extra code. I included it below.
pre {
white-space: pre; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5+ */
}
Can anybody shed some light? I'm seeing some other sites mention a <pre> tag bug with the Mac, but I can't find any solid information. My Mac doesn't arrive in the office until tomorrow, either. :(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<pre>abc def geh jkl abc def geh jkl
abc def geh jkl abc def geh jkl abc def geh jkl abc def geh jkl
abc def geh jkl abc def geh jkl abc def geh jkl abc
def geh jkl abc def geh jkl abc def geh jkl abc def geh jkl abc def geh jkl abc def geh jkl </pre>
</body>
</html>
In IE 5.2.2 on MacOs 10.3.6, the lines are separated the way they were in the source code...
Sounds like something more complex that your scenario!
DerekH
I wonder if you must be doing something "not quite standard"
DerekH
If the only browser it glitches with is Mac IE 5.2.3, then you'll need to try test pages to isolate which of your existing CSS rules are being "inherited" by the <pre> content in that browser. Look for another pre rule formatted like these, as they will definitely override a general pre { } rule:
div pre { }
.someClass pre { }
#theIDofthepreDiv pre { }
