Tuesday, November 15, 2005

Better-Looking Blogger Preview

As many of you already know, there is a bug in Blogger Preview. Fonts are two big, borders slam up against the left edge of the screen, widths are wrong... in short, the browser is operating in quirks mode when it should be operating in standards mode. I have informed Blogger Support of the problem, but until they fix it, here's a workaround. In your template's style sheet, after the body rule, if, for example, you have a font size value of "small":
body.0 {
font-size: x-small;
}

In other words, choose the next smaller font-size value keyword (x-small for small, small for medium, medium for large, etc. You don't need to do this if you're using pt or px values, as these will not trigger a difference in visible size.(By the way, that's "dot zero", not "dot O".) Likewise, if you're having trouble in preview mode with alignment issues, insert this code after the #content rule:
.0 #content {
width: 100%;
}

Now add a "zero" (0) class attribute to the <body> tag:
<body class="0">

If parts of your page still look strange on preview, or if borders aren't showing up in the right place, write the above rule for your #wrap or similar div that surrounds your #content and place it after your #wrap rule with a .0 #wrap selector.


You can usually tell which things to patch. Most templates have multiple declarations in some rules, and some of these have embedded empty comments. Go up to the first declaration without /* */ and clone it in your .0 rule.


God bless!


Edit: changed "% %" to correct comment syntax of "/* */"