homepage Welcome to WebmasterWorld Guest from 54.237.134.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Trouble with CSS in IE
nrobidoux




msg:4092563
 9:35 am on Mar 6, 2010 (gmt 0)

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




msg:4092939
 3:38 pm on Mar 7, 2010 (gmt 0)

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




msg:4093131
 5:05 am on Mar 8, 2010 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved