SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin issues and img too big for it's boots

    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!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css rules referenced above :
    Code:
    #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;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •