1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

Did you noticed that text inputs on many sites are “broken” now? Even on theme forest, the search on top for example. I am now not sure if it’s a bug or a fix because I have experienced some differences between FF text input and text inputs in other browsers. If I remember it right, it was something with padding or line-height…

Anyone has more info on this? Is it a bug or fix?

1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

Seams like nobody cares about this :D anyway for those who are interested, I have done some research and my final cross-browser code for vertically centered text in text input is this:

input {
width: 200px; 
font-size: 11px;
padding: 8px 0px 8px 10px;
}

It should look SAME in all browsers and latest Firefox 3.6 too.

I basically got rid of the line-height which many people uses to vertically center a text inside an element (which works great btw, but not with text inputs). I also got rid of fixed height. The only thing I used is padding. You should have the same number for padding-top and padding-bottom to make it vertically centered.

I am not saying this is the best solution and it’s 100% cross-browser, so if anyone has a better idea, I will be more than happy if you could post your solution here :)

P.S.: I have seen many templates/themes here on TF which needs this medicine thanks to the latest firefox 3.6 … Even themeforest search form has this bug …

2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says

Yes i notice it, just looked at a new theme and seeing that the input has changed.

This is because all other browsers display the padding in the input tag different. So FF3 .6 is now the same as the rest of the browsers.

Ps it’s no bug ;)

1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says
Ps it’s no bug ;)

You are absolutely right, I just forgot to mention it as a fix sry :)

2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says

I am glad that they solved this.

1 post
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Located in Czech Republic
Chates says

Thank you for the solution! I do care :-)

83 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Bruno_V says

I never saw this thread but I came across the same problem and decided to use padding, too ;). However I had to add more padding to the top than to the bottom to center it. Maybe because I also had line-height set.

2445 posts
  • Has referred 100+ members
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
digitalimpact says

Thanks for the code freshface.

Since we’re talking about FF 3 .6, I’d like to take advantage and mention that you always need to declare proper font stacks, or you’ll get ugly, unreadable hieroglyphs :)

Sounds like common sense, but I’ve seen a lot of big players not doing this (happened on the tuts+ network too)... and it’s just a matter of declaring fallback fonts…

by
by
by
by
by
by