...

View Full Version : adding padding adds extra bottom margin



x54
10-27-2008, 11:15 PM
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

Lochlan
10-27-2008, 11:21 PM
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;

FWDrew
10-27-2008, 11:24 PM
Funniest and best way I have ever seen anyone get attention called to their thread :D

Scriptet
10-27-2008, 11:26 PM
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.

rmedek
10-28-2008, 06:43 AM
Funniest and best way I have ever seen anyone get attention called to their thread :D

Maybe, but that was all sorts of inappropriate and broke not only one but several forum rules and guidelines. :|



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum