Margin issues and img too big for it's boots

[Dada_Dan]

Hi all,

I am trying to pin down a couple of issues for a layout I am trying to tweak. Appreciate any help.

It's on the homepage for snowboard-review.com.

I am using Firebug to debug, but it's not helping on these ones.

1. The first is top and bottom margin for the <h3> just under the logo. Firebug suggests there is a margin being applied, but I cannot find where. The <h3>'s on the right-hand side do not seem to have the same problem.

2. The <h3> on the right-hand side ("Recent Entries") is a smaller font than the one on the left-hand side but I cannot see where it is inheriting a smaller font.

3. The div with id blog-header is set with 114 px as the height, but the image inside is also 114 px high, but the image flows outside the div. The img doesn't seem to have any properties which would give it extra padding/margin. I am having to use a margin/top property on the parent div containing all three columns so that the text is not hidden underneath the image.

Thanks!

[Centauri]

1. Browsers normally apply top and bottom margins to heading elements by default (and it varies between browsers) - you need to set it to what you want, as the other h3 has been.

2. You have a rule for #sidebar h3.sidebar-header that specifies 12px font size....

3. You have 5px padding applied to all images which increases the height by 10px.

[Centauri]

The css rules referenced above :

#sidebar h3.sidebar-header, #sidebar li.sidebar-header {
font:bold 12px arial, verdana, sans-serif;
margin:0;
/* background: url(http://www.snowboard-review.com/themes/site_themes/trendy_blue/trendy_grey_sq.gif) 0px 2px no-repeat; */
padding-left:15px;
margin-bottom:5px;
padding-top: 0px;
}

img {
border:0;
padding:5px;
background-color:#fff;
}

[Dada_Dan]

Thanks! I knew it would be something simple - I cannot believe I did not see the img padding - I was concentrating on the div's in Firebug.