Browser Specific CSS Padding for Firefox Field

Browser specific CSS padding for firefox field

Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".

---

The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)

In this case, you would write

@-moz-document url-prefix() {
    select {padding-top:10px;}
}

which is simply the Mozilla-prefixed version of the @document rule, that is not recognised by other browsers.

---

However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.

style="font-size: 14px; padding: 11px 0 11px 5px;"

That has the desired effect in all browsers. See new fiddle.

how to use padding in different browsers?

Add css3 box sizing to every element that has padding. It will fix the issue.

 .text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

Firefox specific margin?

Your problem probably lies elsewhere, but here's how you target Firefox only:

@-moz-document url-prefix() {
    a {
        margin: 0;
    }
}

Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

How do I fix CSS padding issues between Firefox & Chrome?

I think your bug is something other than padding/margin differences between FF and Chrome. Can you try to run your site through the w3c validator, http://validator.w3.org/

Sometimes that can catch strange bugs caused by mix matched or unclosed elements.

Another thing I am noticing is that the results appear to be rendering in the same spot in both images relative to your logo. Perhaps the issue is with your input length or some surrounding element?

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.

change css for firefox

Try adding your styles inside of a Mozilla extension:

@-moz-document url-prefix() {
    /* Styles go here */
}

So in your case, you can add the following lines of code to your CSS stylesheet:

@-moz-document url-prefix() {
     ul.titles li {
        padding: 8px;
        font-family:"Subway", "Courier New", "serif";
        font-size:11;
        color: #000000;
     }
}

Another option you might want to try is Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I highly recommend it.

input padding cutting out text in firefox

The Bootstrap form-control class gets a fixed height by default. Just add a height: auto; to your .join-form selector(to keep flexibility), and change the padding to get the original effect, like this padding: 14px 20px;

See here: http://jsfiddle.net/x78Bh/

Different padding input and button in Firefox

This will fix it

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

Including the border rule above is necessary for buttons to look the same in both browsers.

It also removes the dotted outline when the button is active in Firefox.

To fix it on the input elements aswell add:

input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner

---

Related Topics