Difference Between Firefox and Chrome Padding

difference between Firefox and Chrome padding

If your .button is a button this might be a mozilla inner focus thing... try this?

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

Firefox vs Chrome padding

I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.

Update

I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.

Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.

Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.

Firefox vs Chrome CSS padding and margin difference

I don't know what the exact issue was with the difference between the footer in Chrome and Firefox, but I set the height of the footer to exactly 27px, which is the height of the icons, to fix the problem.

Padding differences between Chrome and Firefox

Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome.

Edit:
See Dennis' response below. A fixed width for each item will be the most reliable.

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}

CSS text padding difference Firefox vs Chrome and others

Add display: inline-block; to your .tags li a

This won't affect the well-behaving browsers, but will fix FF

Div padding-top difference between Firefox and Chrome/Safari

since you use the position:fixed (http://www.w3schools.com/cssref/pr_class_position.asp) for the .navbar, get rid of the padding-top to position the element and use the top property, as shown in this Fiddle: http://jsfiddle.net/8puCW/9/. I've tested it in FF Mac and it is consistent.

.navbar {
    position: fixed;
    background: #D0D1D0;
    float: left;
    text-align: center;
    top: 54px; /*UPDATE HERE*/
    width: 200px;
    height: 100%;
    padding-top:20px; /*UPDATE HERE*/  }

Form padding differences in Firefox and Opera/Chrome/IE

Give the input this CSS:

box-sizing: border-box;

You can read more about box-sizing on QuirksMode, the W3C spec, and MDN. Here is its browser support. Use the prefixes -moz- or -webkit- if required by your target browsers.

---

This answer had previously suggested the value initial, which I had found by using the up/down arrow keys in the Chrome Web Inspector. But it turns out that initial is a CSS keyword, applicable to any property, that represents the initial value of the property – the browser’s default value. initial is less safe than explicitly naming which box model to use. If box-sizing: initial were specified and a browser’s default value for box-sizing changed, the input’s padding could break again.

---

Related Topics