CSS for displaying code snippets in <pre> tags

I just had a look at this site using IE and was a bit shocked at how it looked. It was a disgrace! I use FF almost exclusivly except for sites in work which only work in IE and I use kubuntu on my laptop at home so I have never really tested the site in IE. The problem was code inside <code> tags which screwed up the widths of the divs in the page. (Everything inside <code> tags is also inside <pre> tags) I could of course go back and edit all the posts to shorten the lines but I found this which sorts out all the problems.

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Tags: Technology CSS browsers irishblogs

Comments