Design To XHTML

Когато правя форми, се сблъсках с проблем с дължината на legend.

Имах 2 случая – в единия legend трбяваше да е дълго колкото широчината на страницата, но когато там имаше кратък текст, елементът не се разтягаше достатъчно, а само колкото е  самият текст.

Да се слага широчина не помага. В другия случай, понеже текстът беше по-дългичък излизаше извън рамките на fieldset, а не се пренасяше на долния ред.

Ясно е че и тук дължината няма да помогне.

Тогава открих че ако се сложи span, на който да му се даде стил

legend span{
  display: block;
  width: 220px;
}

нещата се оправят и за двата случая, но… това доста учудващо, се случва във всички браузъри без firefox.

За да може текста да се пренася и на долния ред, когато това е необходимо специално за firefox трябва да се напише

legend{
  white-space: normal;
}

Кликнете тук за да видите примера.