Styling the PRE tag

The pre tag is for preformatted text. Text in a pre element is displayed in a fixed-width font and all content is preserved including, spaces and line breaks. I use the pre tag in my converted html markup. If you look through my blog, you will see many posts with html and css code displayed that were generated using my HTML converter. I am going to be changing my converter tool to add more styling options which is fine, but what do I do if I wanted to change the look of my old posts that include the pre tagged paragraphs? Although my blog is still new, the idea of going back to re-style every post is not appealing.

Fortunately there are other ways. To make changes to every post that includes the pre tag, I can style this tag through CSS to have it effects felt globally. I will be adding a light blue border, 10 pixel border all around, clearing all floated elements and also displaying in table format which means that the rectangle around the pre element is going to size according to its contents. IE is not smart enough to figure out the "display: table" rule but it doesn't get broken either. Firefox displays everything correctly.

    border: 1px solid #c5dfe8;
    clear: both;
    padding: 10px;
    display: table;

Notice the size of the rectangles before the change. These long rectangles will size to content properly in Firefox after you style the pre tag with the code above.