962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says

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!

1862 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 4-5 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says
2322 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Europe
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 100 and 199 users
+1 more
CreativeMilk says

Use jQuery to style them ;)

3 posts
  • Bought between 1 and 9 items
  • Has been a member for 4-5 years
gerry3 says
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.”

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says

@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! :)

93 posts
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • United Kingdom
joelvardy says

@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.”
I do believe you can add this meta tag to the head of your document, so people don’t have to manually set IE8 to compatibility mode.
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />

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

1862 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 4-5 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says
@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 :)

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says

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

1862 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 4-5 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

You are welcome :) cheers!

by
by
by
by
by
by