Thursday, June 05, 2008

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

2 comments:

Pete said...

Actually, by updating the master versions of the CSS and blog widget template, the fix will go out to all people who haven't changed the CSS or the blog widget template via Edit HTML.

Cool_Steve said...

Hello. I need some help and am stressing out over a sudden change in my blog, and I know very little about html. your blog came up in a hit when looking on Google. Blogger help is useless.

When I post a post with text and no pictures, the text spacing was always wider between each line kind of like double spacing. When I started to post a post with a picture too, it changed but only if I did the following: after I loaded the picture at the top I would have to backspace a couple lines so it would be as close to the next as possible. If I hit delete, it moved everything up one line BUT moved the cursor over one space to the right. I then moved the cursor over with the mouse back to the right and pressed delete again to eleimate any extra space. This resulted in text being far closer together and being single spaced. If I used backspaceing instead of deleting, it would double space my posts like I had no pictures in it. I liked how my picture and non picture posts looked different, so I stuck with it.

Yesterday, June 25, I visited my blog and it was fine. Today, June 26, I visited it at work it was fine, came home and logged in and it was fine again. I hit new post, but then backspaced back to the previous page, remembing to use my test blog first (as I do every time I post, I test everything out first). I then logged into my other account, tested, and everything was fine.

This is where I don't know what happened. I logged in and came back to my main blog, and all the text formatting for every post I had ever done with a picture was fucked up. It was all double spaced. I am so stressed over this, but thats not all - all posts, pictures or not, have a extra space between the title and the post text - now it looks so bad and worse! Now my test blog looks better than my good blog

I try and keep my blog as clean and neat as possible, and I borderline OCD when it comes to things like this being 100% perfect. Please help.

http://cartooncouchpotato.blogspot.com/

The good, now screwed up blog.

http://testfo.blogspot.com/

The test blog which has the differances in "picture with and without" formatting and proper "no space between the post text and post title" layout.

Thanks.
Stephen