New form doing my head in!

Deleted User 234324 · 14 May 2009 at 20:10

Attempting to recreate my original forms on a website ive been working on to make them a little more professional with proper validation etc.

The page in question is located at

http://www.torbaycab.org.uk/page-template.php

As you can see for some reason there is a HUGE gap between the name and address sections but I cannot for the life of me figure out why!

Any help would be so appreciated i'd actually offer to buy you a pint!

Tripnologist · 14 May 2009 at 21:45

add overflow: hidden to #contactform ul li

Deleted User 234324 · 14 May 2009 at 21:56

Thank you! Your a star!!!

I go bristol often so I owe you a pint!

Tripnologist · 14 May 2009 at 22:02

Haha, no worries.

Deleted User 234324 · 14 May 2009 at 22:05

Mmm notice that it now results in the footer messing up and the page not going to the bottom, no worries though im sure i'll figure that out.

Tripnologist · 14 May 2009 at 22:10

add margin: 0 auto; to your #footer

Deleted User 234324 · 14 May 2009 at 22:13

Yeah thats ok, noticed that problem, but the lines seperating the left and right sections of content (news feed, menu and the form content) are not going to the bottom of the page. they stop 3/4 of the way down.

Tripnologist · 14 May 2009 at 22:17

I think you'll find you've closed a div where you shouldn't have.

Also, to fix your submit button, remove clear from it.

Deleted User 234324 · 14 May 2009 at 22:26

Managed to sort it by addon an overflow: hidden to the main content wrapper.

Tripnologist · 14 May 2009 at 22:57

Good good.

In case you don't know what setting the overflow is actually doing, it acts as an alternative method of clearing floats.

On the rare occasion, it won't work well with IE6 but because it usually contains floats wrongly anyway, it doesn't happen often. The solution if you ever run into that problem is to set a width on the element you've applied the overflow to.

suarve · 15 May 2009 at 09:38

For annoying CSS issues like this I'd recommend using the inspect element option from Chrome. It tells you all the default values. computed values and user rules being applied to an element. You can also hover over a tag in your html and area of the page will be highlighted. Always use it as a last resort if there's some bug that won't go away.

Tripnologist · 15 May 2009 at 10:10

Or if you prefer firefox, firebug does the same thing and then some.

Deleted User 234324 · 15 May 2009 at 11:06

Yeah been using firefox and firebug myself, would be lost without it!