CODEWITHSUNDEEP
cssfirefoxpaddingborder-box
Gabin
Gabin

Reputation: 1288

CSS padding issue using box-sizing:border-box in Firefox

I'm having a weird issue in Firefox, it looks likes the debug console is lying to me or I'm missing something.

Here is the CSS for the body tag : 

html, body {
    width: 100%; 
}

body {
    padding: 5% 10% 0 10%; 
    font-size: 1.2em;
    font-family: 'Raleway', Arial, sans-serif; 
    font-weight: 300; 
    color: #2b2b2b; 
    margin: auto; 
    max-width: 1200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

I'm using the property "box-sizing" so the max-width is supposed to be 1200px with the padding inside. As the debug console is saying (at the bottom right), the width of the content area is supposed to be 898px but if I measure it, here is what I really get :

CSS padding issue using box-sizing:border-box in Firefox

Am I mistaken about the box-sizing:border-box property ?

Thank you guys !

EDIT : I made a jsfiddle here with a simplified case.

Look at the image below, you'll find the html, the box model given by the inspector, the render and a red square I added on Photoshop (which is really 150x150px). I don't understand, the inspector is saying that the box is 150x150 but it's wrong...

box-sizing and inspector issue on Firefox

Upvotes: 1

Views: 2116

Answers (3)

Gabin
Gabin

Reputation: 1288

Actually Windows 8 is zooming at 125% by default and Firefox is using this ratio as his default zoom level.

Then you have two choices :

  1. Change the zoom level of Windows to 100% : control pannel > appearance > display
  2. Set the Firefox's zoom ratio to 1.0 : type about:config in the adress bar of the browser, search for layout.css.devPixelsPerPx and set it to 1.0

More informations about this here : https://support.mozilla.org/fr/questions/963759

Good to know that most of Windows 8's users are going to see your site zooming at 125% in Firefox.

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

because your padding values are calculated from the whole screen, not from 1200px. As you resize the window(make it smaller), you will see that the paddings will adjust according the screen width value, not from 1200px

Upvotes: 0

Shyam
Shyam

Reputation: 792

Which version you are using... If you are using old version than try addking -moz-

{
-webkit-box-sizing: border-box; /* for older webkit browsers */
-moz-box-sizing: border-box;  /* for older mozilla browsers */
box-sizing: border-box;  /* for latest browsers */
}

Upvotes: 2

Related Questions