Form displays differently in Firefox

Hello everyone, I always seem to run into this issue when I am creating any type of form. I usually test my sites in Chrome or Safari, and in Chrome and Safari I never have any problems, the form looks great, but in Firefox (and even IE) the form always is at the top and not vertically aligned. I am using a background image for the css element “input”. I’m not sure if there is a workaround for this, please help me out. I can probably upload it to show you, but for now, here is an image of what I am talking about. Thanks for any help you can provide me with!

http://themeforest.net/forums/thread/new-firefox-36-and-the-text-input-fixbug-/23836

Use jQuery to style them

Hello everyone, I always seem to run into this issue when I am creating any type of form. I usually test my sites in Chrome or Safari, and in Chrome and Safari I never have any problems, the form looks great, but in Firefox (and even IE) the form always is at the top and not vertically aligned. I am using a background image for the css element “input”. I’m not sure if there is a workaround for this, please help me out. I can probably upload it to show you, but for now, here is an image of what I am talking about. Thanks for any help you can provide me with!

I have found a similar problem with IE. My son has Firefox. Since updating to v.3 IE did not display my site properly, whereas Firefox was displaying it properly. In IE I had to go into the Tools section, make sure compatability view was checked, then go into compatability view settings (right under comatability view) and add my site to the box that opened. After that everything worked fine. The only problem with this is I have to have this printed on my site in case others view my page and are having the same problem with IE. Kind of a drag if someone visits my site and doesn’t read where I have it printed…just notices things aren’t loading properly…yawns…and leaves thinking, “What a screwed up site.”

@freshface

I tried your solution, unfortunately it is not working. Here is the input css:

input { background:url(../images/input.png) no-repeat; width:262px; height:30px; outline:none; border:none; color:#5c5c5c; padding:8px 0 8px 13px; }

The text is still not aligning vertically. Please help. I’m not sure what is going on. I can email you the code or link if you wish to take a look at it. Thanks!

@gerry3

Kind of a drag if someone visits my site and doesn’t read where I have it printed…just notices things aren’t loading properly…yawns…and leaves thinking, “What a screwed up site.”

@webdesigndeluxe – hope you don’t mind me posting this in your thread.

@freshface

I tried your solution, unfortunately it is not working. Here is the input css:

input { background:url(../images/input.png) no-repeat; width:262px; height:30px; outline:none; border:none; color:#5c5c5c; padding:8px 0 8px 13px; }

The text is still not aligning vertically. Please help. I’m not sure what is going on. I can email you the code or link if you wish to take a look at it. Thanks!

Have you tried that without a height specified? (padding only, use more padding if you need)

Sure, shoot me an email with working demo, I can have a look

Ahhh I removed the height and it looks beautiful now in all browsers Thanks so much!!

You are welcome cheers!