Trying to Remove Extra Spacing in Blogger Template

HTML & CSS
1

Notice the extra spacing on the left side of the photo of Linday Lohan in the screen shot of my [URL=“http://blog.retrocitysunglasses.com/”]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

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.



  * {border:0; margin:0; padding:0}
3

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:

element.style {
cursor:pointer;
display:block;
height:570px;
[COLOR=Black][B]margin:0 auto 10px;[/B][/COLOR]
text-align:center;
width:570px;
}

Which is found on line 486:

<img style="display: block; [COLOR=Black][B]margin: 0px auto 10px;[/B][/COLOR] text-align: center; cursor: pointer; width: 570px; height: 570px;" src="http://retrocitysunglasses.com/blog_posts/flat_top_chain_sunglasses2.jpg" alt="" border="0" />
4

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

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 :slight_smile:

6

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

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

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… :confused:

9

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.

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