CSS and float problem I think ... form elements mis aligned

Question

I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.

However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.

(no longer viewable)

Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.

So where is the offending CSS code?

Thank you!

Update

It appears to be fine in Safari.

I am testing on firefox 3 on mac osx .

Answer 1

I think its this:

.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}

Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?

Answer 2

if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.

Answer 3

This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.

Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling

I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.