Stylesheets - CSS, standards compliance, PRE and word-wrap

Author

CSS, standards compliance, PRE and word-wrap

Mr TVTL

2006-02-24, 10:22 am

Hi there,

I've created a series of layouts designed to be optimized for search
engines, and yet also standards-compliant.

The problem isn't in the layouts themselves, but in the display of the
code.

I use the <pre> tags to ensure that the code, as well as all of the tag
formatting, gets transported.

The problem is that pre, by default, doesn't wrap words. I've got a
solution in place that's cross-browser compatible, but unfortunately
the W3 validator doesn't like it.

To see what I mean, click here:

http://www.searchenginefriendlylayo..._footer_23.html

The pre areas are the ones in the content area with the black border
and the light grey background. That's how I want them to appear, but
again, the W3 validator presents errors:

http://jigsaw.w3.org/css-validator/...ader_footer.css

As you can see, the only errors are those related to the word-wrap.
Everything else is fine.

Any ideas on how I can accomplish both of my goals? (Standards
compliance and pre word-wrapping?)

Thanks.

tihu

2006-02-24, 10:22 am

Hi, I found this useful.

http://cheeaun.phoenity.com/weblog/...ed-content.html

white-space:pre-wrap is a valid css2.1 property.....but the w3c
validator checks for css2 (.0) compliance by default

Guess you already know the other white-space values are browser
specific, remove them if 100% standards compiance is important to you

Apparently word-wrap is planned for a text effects module in css3 but
is IE only at present ( You're future standards compliant! )

In the meantime, will white-space:normal give you the word-wrapping you
need?

Mr TVTL

2006-02-24, 10:22 am

No, it won't. That's part of the problem. It inherits the default
property for its element, from what I can gather. In the case of PRE,
that means it just runs allllllllllllllllllllllllllllllllll the way
along the page and stretches it out and makes it look just silly.

If worse comes to worst, I can always put the stylesheet into my code
as a separate stylesheet rather than as an import and show how the
other ones validate. I'd just really prefer not to have to do that.

Thanks.