Centering your content, even in Internet Explorer
I’ve started to join the ranks of those who hate Internet Explorer because of the way Microsoft “interpreted” cascading style sheets and other Web conventions. While just about every other browser uses standards to the best of their ability, Explorer created their own. Admittedly Microsoft is slowly moving towards obeying standards, but the effort seems to take a distant second place from developing “only available on Windows” technologies.
In any case, (diatribe over), many people want to increase the visibility of their pages by making the text a fixed width. In addition, we want to center it to make it look good with the large-width Google ads or menus; and we want to apply this to existing pages without too much work. That's where the standard IE6 - IE7 Internet Explorer tricks stop working. They are good for centering your content, even in Internet Explorer, without wreaking havoc on everything else.
First, create a style to center your content. You will unfortunately need to go into your existing pages for this, but it's a simple matter of adding <div id="content"> to the start of your content, and </div> at the bottom, which I estimate takes (including uploading) around 3-5 seconds per page.
Second, replace your current page declaration, if any, and <html> tag with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
Now, this might screw up your existing code, but I hope it won’t! The language may be switched as needed, e.g. en-ca for Canadians. But the doctype will get Internet Explorer for Windows to interpret your page correctly and currently doesn't seem to demolish Firefox or Safari, even with noncompliant code.
Third, in your main CSS file (I assume you're using a single, external CSS file to reduce page size and help users to cache!), add:
#content {
background-position: center; display: block;
width: 900px;
border: 1px;
border-style: solid;
border-color: #003366;
padding: 5px;
margin-left: auto;
margin-right: auto;
position: relative;}
And that’s it! You now have the pretty effect shown here (OK, I added a shadow effect. Play around!)
By the way, there were two styles used to separate the code from the text: one for the in-line code blocks ("codespan") and one for the bigger blocks. The difference is that the spans have whitespace: nobreak in their css code to prevent unwanted line breaks, and have padding of just 1 point so the red lines don't interfere with the text.