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 5 of 5
  1. #1
    x54
    x54 is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding padding adds extra bottom margin

    Well that got your attention. Sorry, I'm not female or sexy but I do need help on some CSS. No one seemed interested when the title said 'Padding Problem'! Please can someone help me with the following:

    I have added a background image to an h1 tag. I now wish to add some top and left padding to the h1 text in order to get the text where I want it. When I add padding-top 3px it moves the h1 text down as required, but it also adds 3px of blank space bellow the background image, which is not what I want. I have counteracted this by adding margin-bottom: -3px; but this doesn't seem right to me.

    The css is as follows:

    .RecruitersAdvertisers h1, .JobSeekers h1 {
    background-image:url(images/bj_menubg.jpg);
    background-repeat: no-repeat;
    border-left: solid 1px silver;
    border-right: solid 1px silver;
    padding-left: 5px;
    padding-top: 3px;
    margin-bottom: -3px;
    height: 22px;

    You can also see the full version online at:
    http://s253255674.websitehome.co.uk/brusselsjobs/

    Any help would be much appreciated cos I have reached a brick wall with this.

    Thanks

    x54
    Last edited by rmedek; 10-28-2008 at 06:45 AM. Reason: title

  • #2
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Hey mate, remove the top/bottom margins and padding and give line-height:22px a try. That will centre it in the middle of the 22px height. You can modify that accordingly. Padding left works fine also text-indent would do as well.

    You can also use shorthand to combine this:
    background-image:url(images/bj_menubg.jpg);
    background-repeat: no-repeat;
    into

    background:url(images/bj_menubg.jpg) no-repeat;
    Last edited by Lochlan; 10-27-2008 at 11:28 PM.

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Funniest and best way I have ever seen anyone get attention called to their thread
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Just change your height to 18px

    Because remember height is just not the total height.
    total height = height + margin + padding

    so your 22px height + 3px padding is giving 25px height

    so jus take the 3px off and have 18px height and keep the padding.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by FWDrew View Post
    Funniest and best way I have ever seen anyone get attention called to their thread
    Maybe, but that was all sorts of inappropriate and broke not only one but several forum rules and guidelines. :|
    Last edited by rmedek; 10-28-2008 at 06:46 AM.


  •  

    Posting Permissions

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