Why does Firefox elongate input fields? … Help!

[Chris Moore]

Hello!

Does anyone here know why Firefox elongates input fields like this? And how can you mitigate the problem?

Here is my Genesis eNews Extended sidebar widget in both Safari and Chrome: http://reflectonthis.com/help/safari-chrome-form.png

And here is the same one in Firefox: http://reflectonthis.com/help/firefox-form.png

Help! 🙂

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Chris Moore]

And by the way, unfortunately, I don't have a live example to show. I don't want to take this live until I fix it.

However, if it helps, I am using the eleven40 child theme, and this is an eNews Extended widget that I have done some custom designing on.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Chris Moore]

I sorted it out! But I would like to get all of your opinions on the solution.

Here's what I ended up using:

.enews input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Read more about it here: http://paulirish.com/2012/box-sizing-border-box-ftw/

Any thoughts, anyone?

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Author]

Posts