962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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!

1870 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
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

Use jQuery to style them ;)

3 posts
  • Has been part of the Envato Community for over 4 years
  • Has collected 1+ items on Envato Market
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
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+2 more
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.

1870 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
@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
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says

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

1870 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

You are welcome :) cheers!

by
by
by
by
by
by