Blogger Spacing Issue Fixed - June 2008

There were many new features introduced in New Blogger 2006 - some appreciated, others not so. One of the latter category, and not understood by everybody, was the change in vertical line spacing, introduced into a blog by the presence of an indenting element such as "<blockquote>" or "<ul>". This issue was first noted the month New Blogger 2006, and the Layouts templates, was rolled out.

In March, 2008, the problem was acknowledged. This week, it was fixed.

This has been fixed in the master copies of the blog widget and the template CSS.

As noted below by Pete, if your blog has a completely non-edited template, it was upgraded already. If not, and if your template is not too customised, you can get the fix yourself, using Layout - Pick New Template, and getting a new copy of the template that you're using.

I note that the stated way of integrating the fix into an existing template

find the .post p { line in your CSS and move the line-height line into a new .post {} CSS block

was done some months ago, as the tested workaround for the problem, which I implemented in this blog, as I wrote that article.

In my test blog, you can see a demonstration of a post that looks like it should. My test blog uses a clean template, re acquired when this post was originally written, and after the Blogger changes were made.

To make this blog look like that, I had to do a bit of template editing. Besides the changes enumerated in my earlier post, I had to tweak the CSS for the "<blockquote>", "<li>", and "<pre>" text elements. You may be able to think of additional text elements which need similar treatment. Or, maybe you like a more open spacing (maybe "1.4em", or maybe the same "1.6em"). It's your blog, so it's your choice. This is my choice.

.post blockquote {
  line-height:1.2em;  <== Add this line
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }
.post li {  <==
  line-height:1.2em;  <== Add these lines
  }  <==
.post pre {  <==
  line-height:1.2em;  <== Add these lines
  margin:1em;  <==
  }  <==

Now, note the relatively open vertical spacing (1.6em) in the main paragraphs, and the tighter vertical spacing (1.2em) in the above indentation ("<pre> ... </pre>"). This relative spacing should now be consistent in this blog.

If you make these changes, and your blog doesn't look like my demonstration (here) or my test (my other blog), maybe you should consider simply getting a new copy of your template. If you haven't made too many changes in the template HTML, that would certainly have more possibility of yielding the right results.

It's your dime. At least, you should now see that it's possible to get your blog looking right.

>> Top