Firefox Padding

JamesU2005

JamesU2005

JamesU2005

Soldato
Joined
30 Nov 2005
Posts
3,084
Location
London
I have been trying to add some padding to a Div sidebar but there is a problem with the appearance in Firefox.

When I add padding to the Div when viewed in Firefox it not only moves down the required pixels (as wanted) but it also moves to the left a little and thus outside of the Div sidebar, overlapping its border (not wanted).

I would rather not post my code on here and I know it's a long shot in doing so but any ideas what could be triggering movement horizontally?
 
Here is the code for that section:

#sidebarright{
padding:5px;
float: right;
width:150px;
background-color: #12018E;}

If I remove the padding Firefox displays it within the bar.
 
do 5px 0 0 5px or whatever padding you want. if i rember right it goes, top right bottom left, like a clock. This is the same for margins. If you just say padding: 5px that does it for every side, but the 0px 0px 0px 0px does whatever you put in for the side, so like yuo want just padding on the top and left, or say padding on the top and bottom but not the top
 
Doesn't work, what happens is that the wording stays in the same place but it appears if it overlaps the border.

Example when padding to left added - 5px 0 0 5px;
withpaddingleftbv7.jpg


Example when padding - 5px 0 0 0;
withoutpaddingleftxg6.jpg
 
make sure the margins and padding are set all to 0 unless you are going to use left.

you can just use

margin-left:
padding-left:

if it makes it easier for you, otherwise it works the same as padding :

margin: 5px 0 0 5px;
 
Makes no difference, when I remove the float: right; the position is obviously wrong by the padding:5px 0 0 5px; works.

What could do the problem with the float?
 
When you add the 5px padding, you need to also reduce the width of the div by 5px. This is how the CSS box model works.

I think you will find that solves your problem. :)
 
You must log in or register to reply here.
Back
Top Bottom