Проблема CSS и float, я думаю ... элементы формы неправильно выровнены

Question

Я настроил свою форму с помощью CSS. Ярлыки плавают слева, а input / textareas - справа. Они хорошо выровнены.

Однако недавно я добавил блок с элементами-флажками. По какой-то причине над ним появляется поле, которое я не смог найти для решения. Я подозреваю, что это проблема с плавающей точкой, но я не могу понять это. Я вообще довольно хорошо разбираюсь с CSS.

(больше не просматривается)

Обратите внимание на дополнительное пространство над блоком флажков ... Границы помечены, чтобы помочь вам понять, где лежат div.

Так, где находится код CSS, который нарушает правила?

Спасибо!

Обновление

В Safari все хорошо.

Я тестирую Firefox 3 на Mac OSX.

Answer 1

Это потому, что вы используете fieldset с легендой. Легенда выдвигает верхнее поле. Легенды очень сложно стилизовать кросс-браузер, на самом деле большинство браузеров не могут стилизовать их вообще, кроме цвета шрифта.

Перейдите по этой ссылке, чтобы увидеть некоторые исследования, посвященные стилизации элементов легенды (со скриншотами в разных браузерах): Стили легенды

Я предлагаю вам скрыть легенду и добавить дополнительную метку внутри набора полей для совершенства браузера.

Answer 2

если я не ошибаюсь, ваш флажок и метка в классе option-row оба определены как элементы уровня блока. попробуйте удалить свойство display или установить его как встроенное.

Answer 3

Я думаю, это так:

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

Firebug говорит мне, что ваши границы перекрываются. Снижение ширины этого поля до 8% будет работать, но вы не уверены, что достигните желаемого?