View Full Version : Need Help With Blogger Template Code

12-14-2010, 11:27 PM
I'm having trouble removing what seems to be about 10px worth of padding on the far left of the main column in the body of my blog (http://celebritystyledaily.blogspot.com/). The post date, post title, and image should line up with the left side of the header image but there's some extra padding on the left I can't get rid of. Header image is 796px but the main body of blog (sidebar + post) should also be 796px. How do I get rid of that padding on the left?

See screen shot below. Red dash highlights the padding I need to remove...


12-15-2010, 12:31 AM
Hello jihanemo,
You've been on this forum long enough that someone must have told you about firebug (http://getfirebug.com/) by now, it easily shows where the 15px padding is coming from.
It's actually a 15px margin set a couple parents up, on .main-inner .column-center-inner .section

You coud either move that h2 that has the day and date above the container that has has that margin, like this -

<!-- corrects IE6 width calculation -->
<div class="columns-inner">
<div class="column-center-outer">
<div class="column-center-inner">

<h2 class="date-header"><span>Tuesday, December 14, 2010</span></h2>

<div class="main section" id="main"><div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<!-- google_ad_section_start(name=default) -->

<div class="date-outer">

<div class="date-posts">

OR you could pull your h2 over from where it is now with a negative margin, like this (I didn't look further to see why it's not 15px) -
h2.date-header {margin: 0 0 0 -5px;}

OR on the span like this -

h2.date-header span {margin: 0 0 0 -15px;}

12-15-2010, 01:05 AM
Thank you!

12-15-2010, 03:29 PM
Oh - I'm having the same problem on the blog (http://celebritystyledaily.blogspot.com/) with an image I placed on top of the header. There seems to be some margining or padding on the left side of the grey banner ad - I can't locate the code that's causing it. I need to get rid of that extra spacing so that the banner ad lines up with the header logo on both sides... (screen shot below)... Again, the red dash represent the extra spacing...


12-17-2010, 03:30 AM
I use Firebug and I've tried using the parent styles from the firebug - I experiment w/ them to see if I've got the right one even. But Blogger is a little more complicated than one might assume. Anyway, I'll keep using Firebug and play around with it some more next time I run into a problem like this.

12-17-2010, 04:01 AM
Okay - here's one that I'm having a problem with and I'm trying to locate the CSS for it using Firebug.

All of the post images have a 10px bottom margin on them. Firebug says that the styling is inherited from "element.style"? I don't know what that means.

element.style {
margin:0 auto 10px;

Is element.style a selector?

12-17-2010, 04:25 AM
It means margin: 0 auto 10px; is being applied inline. Look in your markup and you find
<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 520px; height: 704px;" src="http://americanchic.net/csd_posts/mary_kate_olsen_kelly1.jpg" alt="" border="0" /></a>

12-17-2010, 04:46 AM
Okay - "element.style" means that the specified styling is inline?

And I guess that means that this styling has not been assigned in the style sheet? This styling is not inserted by me. How is it being placed there? By javascript? It would be a pain to have to remove this inline styling every time I create a post. But I would think that there is a code somewhere that automatically inserts this inline coding when I add images to blog posts?

12-17-2010, 05:07 AM
This styling is not inserted by me. How is it being placed there? By javascript?

All I can see from here is your rendered code. Not sure what's generating it.

12-17-2010, 05:11 AM
Right, right. That makes sense. Okay then. I'll keep going to figure it out. Thanks for your help!