[CSS] Padding Differnet In IE & FF

[Decode]

Ive coded a layout in IE, but when i view it in firefox the box that i have added padding to is longer than the box in IE.

On IE its like

<------------------------ 300px ----------------------->
<-Padding-><------------Content----------><-Padding->

But on firefox its like

__________<------------------------ 300px ----------------------->
<-Padding-><---------------------Content--------------------------><-Padding->

Does anyone know how to fix it so its the same in IE and FireFox.

[Coldplay]

Care to post the code?

[Klydo]

It's because your box has a width. If you remove any widths then it will pad the same in both browsers. I haven't looked up on the cause but there's a solution that I use which is by putting another div inside your main div and putting margins on the inner div. This means it acts like padding but works in all browsers.

Like so...


<div class="outer">

<!-- this one has the margins in it's CSS to act like padding -->
<div class="inner">

<p>Text or whatever...</p>

</div>

</div>

I hope that helps a little

[--ss--]

It's because your box has a width. If you remove any widths then it will pad the same in both browsers. I haven't looked up on the cause but there's a solution that I use which is by putting another div inside your main div and putting margins on the inner div. This means it acts like padding but works in all browsers.

Like so...


<div class="outer">

<!-- this one has the margins in it's CSS to act like padding -->
<div class="inner">

<p>Text or whatever...</p>

</div>

</div>
I hope that helps a little
Indeed that is correct , By having an container with all the divs inside it the width of the container will limit the inside div so it can't apply the padding outside the div controlling it ;).

If you were to make it so it uses two different stylesheets for the browsers , the 'equation' for the correct amount of padding on FF would be width - the padding to give you the new width