Welcome to The Real Blogger Status - Beta. Please note the warnings (as of 6/13: 0 active), and the alerts (as of 1/10/2007: 5 active).

Please be aware of the naming variances in this blog. You will find various references to "Classic" / "Old Template 2006" Blogger, and to "Beta" / "New Template 2006" Blogger.

Friday, November 24, 2006

Spacing Changes In Blogger Beta - 3

A new post starts out with wide vertical spacing. Look at what we have here, from line to line. Nice and wide vertical spacing. Clean and easy to read. The perfect look for a blog, right?

(Note): This post has been migrated to (and improved in) The Real Blogger Status: Spacing Changes In Layouts Templates #3.

Now, let's throw in a quote.


In the past, and looking at my example shown in Spacing Changes In Blogger Beta, you'd start seeing the problem here. My immediately previous article Spacing Changes In Blogger Beta - 2 suggested an obnoxiously tedious workaround to this problem, which involved surrounding each indent element, such as
<blockquote> ... </blockquote>
with an extra span set to give

<span style="line-height: 1.2;"><blockquote> ... </blockquote></span>


This was fine - it made my blog posts look neat and tidy again - but it had its drawback. It was a major pain in the ass to use - any of my blog posts, of any length, would include 2, 3, or more formatting elements, which I would have to surround each one.

So today, whilst browsing Blogger Help Group: Something Is Broken, I come across Blockquote problem w/ Minima template, with a better workaround.

Go to the Template | Edit HTML tab. In the CSS (top) section of your template code, find the post section. In this section, under the ".post p" heading, find the line that says: line-height:1.6em. Move this line to the ".post" section.


So, let's see what we have in my template.


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

...

.post p {
margin:0 0 .75em;
line-height:1.6em;
}


and change it to


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
line-height:1.6em;
}

...

.post p {
margin:0 0 .75em;
}


Move the one line of code, in red. Save, and View Blog.

Simple, but still a workaround.
  • It's one change / template setup in the blog (remember if you change templates, you'll have to repeat this one change). Not one change / page element in each post, for eternity.
  • When installed, you lose spacing differences in indented elements (<blockquote>, <ol>, <ul>).
The blog is neater now, but it's not as readable. Let Blogger know that this needs to be fixed properly.

27 comments:

Paul said...

I added the .post change that you suggested (my template didn't even have a .post entry) and got the results that you described.

But then I went back to my template and found .blockquote and .blockquote p entries. So I added "line-height:1.4em" to these. They look like this now:

.post blockquote {
margin:1em 40px;
line-height:1.4em;
}
.post blockquote p {
margin:.75em 0;
line-height:1.4em;
}

And the line spacing seems to work completely right now, in both IE and Firefox. (Here's an example.) I also noticed that the posts where I had added the span tags for a temporary fix still look fine, so those tags don't have to be removed. And now I don't have to add them any more.

If this check outs for you, please inform others in the Blogger Help forum. Maybe get someone to change affected templates too?

Thanks,
Paul R

Henry Louis Gomez said...

Great fix. Thanks. This problem was driving me nuts.

John Whitfield said...

That seems to work for me - thanks very much

William Kates said...

Thanks so much for the fix. The narrower line spacing was really annoying - your fix restored the post text to the look that it had before. Thanks again!

Pen Names: justwhen, rachel said...

Thank you, Chuck AND Paul. I've been trying to figure out how to fix that problem, and I'm a total beginner when it comes to HTML, so it's been frustrating... Your workarounds are just what I was searching for.
Thank you thank you thank you.

Nate said...

Thanks very much for these fixes. The spacing issue was driving me up a wall! Maybe every post won't require over 45 minutes now.

Carolyn T said...

Oh, I'm a happy camper again. Not understanding html myself, I didn't know what I was really looking at when I'd look at the code. I did your fix (my template was set at 1.6 em), looked at my blog, then changed it to 1.4. Next thing I want to tackle is the font sizes. Thanks VERY much for your help.

Ms M said...

Chuck, Thank you for this fix. I tried several others that did not work for me (listed through Blogger help group), but moving the line-height to .post, instead of under .post p did the trick.
I nearly always post photos with my blog and notice that changing the font to italic or bold or block quotes throws off the formatting when the text wraps around a photo. Still looking for a fix for that...

Unknown said...

Thank you so much for this fix. It was driving me crazy! :)

Eric Edberg said...

Thanks! It really helped.

John Classen said...

Thanks Man. Good thing someone knows what the hell is going on LOL.

John Classen said...

Thx for the tip. it was driving me friggin' NUTS!

Brian said...

Hey... Bless you for your help! That was killing me, thank you so much!

Packer487 said...

Thank you SO much for this fix. I don't know a whole lot of HTML and it was bugging the crap out of me.

Angela Young said...

Oh, you are the best. I don't know much (next to nothing) abut html either, but your instructions - and Paul Ronde's - are so clear. Now my blog looks beautiful again and no more headaches - am I sounding like an ad?! - when posting. THANK you.

AnnB said...

More thanks for both of you. The two fixes together work like a charm.

Unknown said...

Who-hoo!!! That was just ticking me off, because I just didn't get it (being a neophyte in the world of web related languages). Thanks for the great tip!

Michael Leddy said...

I just (finally) switched to a new template, saw messed-up the line spacing, tried changing line heights, with no success, and thought of all the work it was going to take to get my old (tweaked) template going again. Then I thought I'd look for a simpler solution. Thanks!

Rachel said...

Chuck and Paul, thank you very much for sharing the knowledge! The instructions were so clear even I could follow them, and my blog's all fixed now. :)

Keinton said...

Thank you so much - I was wasting so much time on this!

Slee said...

Thanks, this was a great fix.

Jingga Studies said...

brilliant!! thanks a lot!

tes said...

good lord. You fixed it!

[quote] Go to the Template | Edit HTML tab. In the CSS (top) section of your template code, find the post section. In this section, under the ".post p" heading, find the line that says: line-height:1.6em. Move this line to the ".post" section.[/quote]

I would get spacing issues after anything video, slideshows, photos. Now it's right!

pepperstix said...

fixed! oh, ur so clever... and have been clever since 2006! wow! thnx

ART RANT said...

omg thank you so much this was driving me crazy for a month now. thank you X a million

Unknown said...

Thanx a ton!!

MommyTime said...

Thank you! This has been driving me batty for two years. Finally, it's fixed.