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>).
27 comments:
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
Great fix. Thanks. This problem was driving me nuts.
That seems to work for me - thanks very much
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!
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.
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.
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.
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...
Thank you so much for this fix. It was driving me crazy! :)
Thanks! It really helped.
Thanks Man. Good thing someone knows what the hell is going on LOL.
Thx for the tip. it was driving me friggin' NUTS!
Hey... Bless you for your help! That was killing me, thank you so much!
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.
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.
More thanks for both of you. The two fixes together work like a charm.
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!
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!
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. :)
Thank you so much - I was wasting so much time on this!
Thanks, this was a great fix.
brilliant!! thanks a lot!
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!
fixed! oh, ur so clever... and have been clever since 2006! wow! thnx
omg thank you so much this was driving me crazy for a month now. thank you X a million
Thanx a ton!!
Thank you! This has been driving me batty for two years. Finally, it's fixed.
Post a Comment