Form layout breaks in IE7

HTML & CSS
1

Hi!

I encountered a strange problem with my website and hope any of you can point me in the right direction.

Have a look at http://www.paznow.com/ucd/

The layout looks fine in FF, Safari and IE8 but breaks in IE7. The buttons in the middle column just shift down and something weird happens to the contact form on the left (where’s the submit button gone?). It seems to be only IE7.

Does anyone know how to fix this?

Paz

2

Yes it places it in a weird position, though as I said above you can place that accordingly (via margins)
I set the margin to 0 in the input above for the 2nd fix (if you look) and then to place it back where it was, update the margin values (I only set every margin for the input to 0 because it was easier to work with)

Edit:

Yes people care about IE6, it’s not quite dead and a good bit of users still use it

3

Middle column-this patches it up nicely :). The main problem was you setting huge margins thus they had to move to seperate lines

#download a.download:link, #download a.download:visited
{margin:10px 0 0 140px;} 
.donatebtn{margin:10px 0 0 15px}
#download form{width:111px;float:left;}

Submit button-it’s just dropping so much because of many float drops so it’s hidden becuase of your fixed height container

input.submitbtn{margin:0;}
p#captchatext{padding-left:0;margin-left:15px;float:left;}

Then plaec accordingly :slight_smile:

4

I think I’ve fixed it. Let’s hope it stays that way. According to Adobe Browserlabs it works fine in everything except IE6 (does anyone still care about this?)

Thanks for your help!

5

Thanks a lot! your first fix seems to work but the second one just places the submit button in a really weird position. How can I tidy this up so it floats better?