Trouble with CSS in IE

[nrobidoux]

For me this seems to be a continuing story LOL. I'm always having trouble with IE. Most of the time I can figure it out but I'm having a hard time with this one.

I'm using my personal site as a sandbox-like environment to tinker with webdev ideas. So all the links are actually ajax requests. (I mention this because.... maybe it's part of the issue.) So basically whatever you see that changes in your browser when you click a link is the only stuff that was sent over the wires/air to your computer.

Part of my site has code snippets I've written. The ajax javascript handler inserts the src file contents as-is into a CODE tag. I have this in a CSS file:

CODE {
background-color: rgb(155,155,155);
opacity: 0.75; filter: alpha (opacity=75);
border: 3px groove rgb(155,155,155);
color: rgb(0,0,0);
padding: 4px;
display: block;
white-space: pre-wrap;
}

And it works fine in Firefox. But it does not work with IE. I tried adding this for IE browsers on the main page but to no avail:

<?php
if(false !== strstr($_SERVER['HTTP_USER_AGENT'],'MSIE') || false !== strstr($_SERVER['HTTP_USER_AGENT'],'Microsoft'))
echo "<style type=\"text/css\">\nCODE {white-space: pre !important; word-wrap: break-word;}\n</style>";
?>

What am I missing? In IE the text wraps as if it were normal HTML.... which means all the whitespace is condensed to a single space and my code appears as if it were written on one long line.

The styling I'm trying to accomplish is to break on newlines and wrap if the line exceeds the DIV width.

Thanks a bunch

[MarkFilipak]

all the whitespace is condensed to a single space

Screwing up your code indenting, eh? Believe it or don't, IE is actually behaving properly for the CODE tag. The CODE tag is supposed to be mono-spaced like the PRE tag, but it's not supposed to act like it has hard-breaks like the PRE tag. You should probably be using the PRE tag, but then the code wouldn't wrap to fit the DIV container. The real problem is that the "Appendix D. Default style sheet for HTML 4" in the CSS spec under-specifies the default style of the CODE tag, the PRE tag, and a lot of other tags.

There is a solution, but it's extremely ugly involving javascript and DOM programming. If you can devise a different way to present your code that is more straight forward though perhaps not quite so pretty, I'd do it that way if I were you.

[nrobidoux]

Why does IE not listen to the white-space property? Shouldn't that allow me to change how spacing is interpreted in any block level element?