SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Remove Extra Spacing in Blogger Template

    Notice the extra spacing on the left side of the photo of Linday Lohan in the screen shot of my blog. What is causing that extra spacing on the left side of the post images in my template? Shouldn't the image line up to the left? I can't find it in the code to get rid of it.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jihanemo View Post
    Notice the extra spacing on the left side of the photo of Linday Lohan in the screen shot of my blog. What is causing that extra spacing on the left side of the post images in my template? Shouldn't the image line up to the left? I can't find it in the code to get rid of it.
    Browsers have different defaults for border, margin and paddings. In my CSS file I set the following and then hard-code the parameters wherever required.

    HTML Code:
      * {border:0; margin:0; padding:0}

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Your blog template is placing inline styles in the html. The images have auto margins applied to them which is centering the images under the headings.

    The first image on that page is setting these styles on line 486

    Firebug shows this:
    Code:
    element.style {
    cursor:pointer;
    display:block;
    height:570px;
    margin:0 auto 10px;
    text-align:center;
    width:570px;
    }
    Which is found on line 486:
    Code:
    <img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 570px; height: 570px;" src="http://retrocitysunglasses.com/blog_posts/flat_top_chain_sunglasses2.jpg" alt="" border="0" />

  4. #4
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank for the info guys. So if it's an inline style, then the styling is likely coming from some kind of token placed within the template?

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    then the styling is likely coming from some kind of token placed within the template?
    Is this blog some sort of CMS like WordPress that uses it's own editor?

    If so the editor is probably injecting the inline styles, if that is the case you might be able to remove those default styles in the editor settings.

    Something is putting those styles in there if you didn't do it

  6. #6
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using the Blogger platform. Yes - I believe it has an editor - I can go in and edit the template myself. I just can't identify the section that automatically inserting the inline styling...

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I can go in and edit the template myself.
    Try that first then and see what happens afterwards.

    If the styles reappear then the editor settings will need to be tweaked (if possible)

    The problem with inline styles is that they carry more weight than styles in your stylesheet. That makes it impossible to override them with any styles you attempt to set in the stylesheet.

  8. #8
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - I tried going and playing with the styles. I will try some more. Is it possible that the styling is being inherited from the parent container... wait... that doesn't make sense...

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah - I tried going and playing with the styles.
    What I meant was: See if you can completely remove them so that only the img attributes remain.

    Code:
    <img src="http://retrocitysunglasses.com/blog_posts/flat_top_chain_sunglasses2.jpg" alt="#" width="570" height="570"  />
    Then you can target and style the images via your CSS.

    If the styles mysteriously reappear then your editor settings will need to be tweaked so it does not style them. You will probably need to get help with editor settings at the Blogger forum if there is one.


Bookmarks

Posting Permissions

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