My Contact Form is all jacked up in IE… help!

I’m IE-debugging my website at this time, and I’ve find a couple glaring difficulties with my contact web site and I really don’t even know where to begin with.

The text is aligned on the top of the inputs instead of centered and the particular scroll bar is visible if or not it’s needed, however most glaringly, the PNG transparency about the submit button just isn’t working correctly. That one boggles my imagination, as I’m making use of transparent PNGs throughout the site and this can be a only one that’s having any problems rendering.

Your page is right here: http: //mcgee-designs. com/contact. html (Compare to Firefox or Chrome to find out how I’d like it looking. )

Here i will discuss the relevant markup in addition to CSS, to save digging through your source:

< kind id=" contact-form" method=" POST" action=" send. php" >
< ul>
< li> < source type=" text" class=" one-line" name=" name" value=" Name" /> < /li>
< li> < source type=" text" class=" one-line" name=" email" value=" Email address" /> < /li>
< li> < source type=" text" class=" one-line" name=" phone" value=" Mobile phone number" /> < /li>
< li> < source type=" text" class=" one-line" name=" website" value=" Website" /> < /li>
< /ul>
< div class=" body" >
< brand id=" body-default" for=" body" > What can i do for you< /label>
< textarea class=" body-input" name=" body" > < /textarea> < /div>
< source type=" submit" class=" button" > < /input>
< /form> 

#contact-form
thickness: 870px;
margin: automotive;
margin-top: 20px;
outline-style: probably none;
outline: 0;


#contact-form ul
job: relative;
float: eventually left;


. one-line
display: stop;
color: #53758e;
font-family: 'Coolvetica', Arial, Helvetica, sans-serif;
font-size: 24px;
thickness: 347px; height: 56px;
qualifications: url(.. /images/contact-form. png) no-repeat;
border: 0;
padding-left: 20px;
margin-bottom: 22px;
outline-style: probably none;


. body
display: stop;
color: #53758e;
font-family: 'Coolvetica', Arial, Helvetica, sans-serif;
font-size: 24px;
job: relative;
float: proper;
width: 489px; length: 294px;
border: 0;
qualifications: url(.. /images/contact-form-body. png) no-repeat;

. shape textarea
width: 430px; length: 180px;
position: family member;
color: #53758e;
font-family: 'Coolvetica', Arial, Helvetica, sans-serif;
font-size: 24px;
margin: 25px;
border: 0;
qualifications: none;
outline-style: probably none;
resize: none;


#contact-form. mouse
display: block;
thickness: 103px; height: 103px;
text-indent: -9999px;
qualifications: url(.. /images/contact-button. png) no-repeat;
job: absolute;
bottom: 26px; proper: 10px;
border: 0;
cursor: pointer;


#body-default
position: absolute;
top: 25px;
eventually left: 30px;

Any help is greatly appreciated!

Having a review of it… Your submit press button isn’t actually about the form anywhere… neither will it be in the internet page..
for the. oneline class attempt adding a line-height: 56px; this should centralize the text while in the container. If you ever change the type and model of the training height change the particular line height to check.

Other than that its a fantastic looking site person. good work!

I have just found your own submit button.. i didn’t realise you’d to click inside message for it to seem.

Aha! Your line-height worked superbly, thanks. I worked out that it appeared to be the jQuery animation that was making the PNG not necessarily render correctly, consequently I disabled it for IE. Now I have to learn how to hide the scrollbar right until it’s needed…. Setting overflow to auto did the trick.

Thanks a ton!