1px extra right padding

Discussion in 'CSS' started by ideas_man, Nov 17, 2006.

0
  1. #1
    Hey guys,

    I use the following CSS to build a tab like menu bar.However, the padding is uneven.There is always an extra pixel of padding on the right whenever a bold font is used.

    I'm using XHTML1.1 doctype.

    
#nav{
height:26px
}
								
#nav ul {
margin:0;
padding:0
}

#nav ul li {
display:inline}

#nav a {
background-color:#215390;
color:#ffffff;
font:bold 12px Arial, Helvetica, sans-serif;
float:right;
line-height:25px;
margin-left:1px;
padding:0 10px;
text-decoration:none
}
    Code (markup):
    The padding on the anchor tag produces 10px padding on the left, but 11px padding on the right.I can get the desired 10px each side by using:

    
padding:0 9px 0 10px;
    Code (markup):
    However, I'd really like to find out why this is happening.If anyone can throw some light on this, I'd appreciate it.

    Thanks :)
     
    ideas_man, Nov 17, 2006 IP
  2. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #2
    Try creating individual states for your buttons ie #nav a:hover and reduce the width or padding for that hover element by 1px. Its probably just the fact that the text is bold and hence slightly larger which is causing the increase. Do you get the same effect in all browsers? or is the problem browser specific?
     
    sabian1982, Nov 17, 2006 IP
  3. ideas_man

    ideas_man Active Member

    Messages:
    212
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Hi Sabian,

    Thanks for your input.

    The problem occurs across all browsers I've tested on so far (FF2.0, IE7, O9) so I dont think it is a rendering problem, more likely a problem with the way I've set up my css.

    But I just can't see why using a bold font suddenly makes more padding on the right.I've tried various alignment and floating combinations just to see....but the extra padding is always on the right.If it was going to have any impact on the padding, I would have thought that there would have been less than the defined amount.

    It's not a huge problem....its just really bugging me :)
     
    ideas_man, Nov 17, 2006 IP