Strange vertical gap on IE6 & IE7 in my form when using css for layout

Question

Thanks to Jonathan Amend, the css is now fixed in iebug.html below.

It's hard to really explain this problem without looking at it in IE6 or IE7, but anyway if you have a look at the following pages on IE6 & 7 you'll see next to "send me a brochure" and "I would like more information on (tick one or more boxes)" the checkboxes and their labels have been mysteriously pushed or pulled down for some reason:

http://sonic.huntinternet.com/iebug.html

I've tried altering the margins and padding on all my elements to 0 yet this has no effect on IE6&7 - meaning I think it's a bug of some kind.. however I don't really have enough experience to know what bug to even look for so any kind of pointer would be nice.

FYI I've used a guide off the sitepoint website that suggested using nested lists, but really that shouldn't make any difference. Both the xhtml and css are valid according to w3c's validator.

Thanks for your help! John.

Answer 1

Add *display: inline-block; to your .enquiry-form ol li. This is a common bug with how IE 6/7 clears list items (block elements by default) onto new lines.

Answer 2

For this, it's being pulled down because your floated label is two lines long in copy, so the OL is aligning it's top position to the top of the second line.

A solution that comes to mind here is to make the OL floated left as well. This will, of course, require that each LI has the clearfix styles on it (styles for clearfix can be found here: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/).