Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Need Help With Blogger Template Code

    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. 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...


  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jihanemo,
    You've been on this forum long enough that someone must have told you about firebug 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 -
    Code:
    <!-- 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) -
    Code:
    h2.date-header {margin: 0 0 0 -5px;}

    OR on the span like this -
    Code:
    h2.date-header span {margin: 0 0 0 -15px;}
    Last edited by Excavator; 12-14-2010 at 11:34 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thank you!

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Oh - I'm having the same problem on the blog 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...


  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

    Code:
    element.style {
    cursor:pointer;
    display:block;
    height:645px;
    margin:0 auto 10px;
    text-align:center;
    width:520px;
    Is element.style a selector?
    Last edited by jihanemo; 12-17-2010 at 03:04 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It means margin: 0 auto 10px; is being applied inline. Look in your markup and you find
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jihanemo View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Right, right. That makes sense. Okay then. I'll keep going to figure it out. Thanks for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •