Fieldset в Firesfox

Deacon · July 5, 2009

Элемент Fieldset в Firefox 3.5 уходит вверх. Во всех остальных браузерах всё идеально одинаково.

Какое может быть решение проблемы?

Открываем в Firefox, чтобы увидеть проблему

CSS прямо в исходном коде смотрите.

Edited July 5, 2009 by Deacon

dyadya · July 5, 2009

Уж больно у Вас доктайп хитрый...

В FF срабатывает

 line-height: 40px;

PS. Грех в FF Firebug не использовать...

Edited July 5, 2009 by dyadya

harrids · July 5, 2009

Уж больно у Вас доктайп хитрый...

да там похлеще, хэд и стайл в пустоте висят)

Deacon · July 5, 2009

Уж больно у Вас доктайп хитрый...

Доктайп html5, который прекрасно работает во всех браузерах.

В FF срабатывает
 line-height: 40px;

Я ещё думаю, может быть проблема в reset: «vertical-align: baseline». Если для fieldset установить «vertical-align: top», тогда тоже нормально. Но может быть существует какое-то более верное решение.

Кстати у меня установление line-height для fieldset не срабатывает.

PS. Грех в FF Firebug не использовать...

Я Firefox не пользуюсь. С самого появлени неприязнь визуальная.

да там похлеще, хэд и стайл в пустоте висят)

Это просто по быструхе для примера свёл всё в один html-файл, у меня всё по стилевым файлам разбито.

И зачем эти умничания, если оно никак не влияет на вопрос?

Edited July 5, 2009 by Deacon

dyadya · July 5, 2009

Кстати у меня установление line-height для fieldset не срабатывает.

Я блокирую это назначение файрбугом в FF и картинка становится такой же как в Опере и ИЕ(преимущество FF с файрбугом).

Доктайп html5, который прекрасно работает во всех браузерах.

Такой доктайп, мне кажется, просто одинаково не работает во всех браузерах

Deacon · July 5, 2009

Я блокирую это назначение файрбугом в FF и картинка становится такой же как в Опере и ИЕ(преимущество FF с файрбугом).

То есть ты хочешь сказать, что удаляешь «line-height: 40px;»? Ну это ведь бред, я хочу, чтобы строка менюшки была «line-height: 40px;», по умолчанию «line-height: 20px;» во всём документе установлено. Я не знаю, что padding'ом и margin'ом, двигать тогда вверх вниз в пределах блока высотой в 40px, если хочется вертикально по середине надписи меню забомбить?

Кстати надо бы освоить Firebug.

Такой доктайп, мне кажется, просто одинаково не работает во всех браузерах

Во всех новых нормально. Я, думаю, это логично, что если кто-то пользуется говнобраузером, то и сайты он не должне в полной красе смотреть.

Но дело не в это, доктайпы я с html4 ставил разные, на эту проблему никак это не влияет.

Deacon · July 5, 2009

Ну установил я Firebug посмотрел. У кого-то с глазами плохо, всё равно есть отличия по вертикали в Firefox, если «line-height» блокировать.

Edited July 5, 2009 by Deacon

harrids · July 5, 2009

И зачем эти умничания, если оно никак не влияет на вопрос?

Ок, ладно-ладно) Просто встречая на первых строчках такую ерунду, дальше читать уже не хочется.

Если по делу, то, имхо, вместо display: inline лучше использовать float: left, проблем куда меньше будет.

Проверил на твоем коде - работает везде, и в FF3.5 тоже.

Deacon · July 5, 2009

Ок, ладно-ладно) Просто встречая на первых строчках такую ерунду, дальше читать уже не хочется.

Ха-ха, ерунду? Такая уже ерунда полная написана мной?! И вообще браузеры не правильно работают с доктайпом, как видишь, разницы между моим и супер-крутым твоим никакой: и твой и мой одинково плохо fieldset в браузере отображает. А так какой тогда круче?

http://dev.w3.org/html5/spec/Overview.html...duction-to-html

Если по делу, то, имхо, вместо display: inline лучше использовать float: left, проблем куда меньше будет.
Проверил на твоем коде - работает везде, и в FF3.5 тоже.

Не расстраивайся, но ерунду пишешь ты, причём полную. Для li лучше и намного именно inline, а не float, что больше для блоков подойдёт. Окей, да?

А нужен мне совет врубающегося человека в решение проблемы fieldset в Firefox.

Edited July 5, 2009 by Deacon

Deacon · July 6, 2009

ап, молю о помощи отцов html и css!

s0rr0w · July 7, 2009

Где тег <html>?

Deacon · July 7, 2009

Где тег <html>?

А тебя что ступорит его отсутствие или ты не замечал, что несложные куски html прекрасно и без этого тэгп работают.

По делу скажешь что?

Edited July 7, 2009 by Deacon

rus · July 7, 2009

Что за нах..., тег style должен находиться в теге head, а тег html должен быть в самом начале и закрывать в самом конце все остальные теги, а у тебя он вообще внутри где-то конечно же будут траблы, для начала надо верстать научиться!

З.Ы. а без доктайпа к стати, браузеры каждый по своему будет отображать твою страницу. Про стандарты тебе надо почитать прежде чем умничать.

Edited July 7, 2009 by rus

Deacon · July 7, 2009

Я так побыструхе наметал, оно никак не влияет, у меня на локалке всё как надо вписано и также проблема. Доктайп html5 мы говорит о Firefox 3.5, который поддерживает html5 и этот доктайп. Вы по делу сказать можете что-нибудь? Баг проявляется в любых случаях, не зависимо от того, куда я вписал стили, когда спешил.

Всё, сделал всё как надо, перезалил.

Проблема осталась.

Открываем в Firefox, чтобы увидеть проблему

ZoNT · July 7, 2009

#navigation form, #navigation fieldset {

display:inline;

vertical-align:bottom;

}

rash · July 7, 2009

Где тег <html>?

Он же опциональный для HTML :-)

Deacon · July 7, 2009

Он же опциональный для HTML :-)

Оно на практике так и есть.

#navigation form, #navigation fieldset {
display:inline;
vertical-align:bottom;
}

Выходит baseline не действует в Firefox.

Deacon · July 7, 2009

А кто-нибудь может объяснить природу бага, в Firefox baseline не действует?

s0rr0w · July 7, 2009

Оно на практике так и есть.
Выходит baseline не действует в Firefox.

Выглядит как баг.

Deacon · July 7, 2009

Выглядит как баг.

Выглядит так, как будто только с этим браузером у меня проблемы. )))

s0rr0w · July 8, 2009

Выглядит так, как будто только с этим браузером у меня проблемы. )))

Это у вас со знаниями матчасти проблемы, а не с браузером.

Deacon · July 8, 2009

Это у вас со знаниями матчасти проблемы, а не с браузером.

Так ёлки, я уже 3 дня спрашиваю как надо. Если у вас с матчастью всё в порядке, почему бы не рассказать, то чего я ещё не знаю и показать как надо правильно делать?

Deacon · July 8, 2009

s0rr0w

Давай объясняй!

s0rr0w · July 9, 2009

s0rr0w
Давай объясняй!

Boris Zbarsky из Mozilla рассказал следующее. Fieldset они приняли как replaced элемент, который имеет поведение при display: inline, как у картинки. Почему так? А потому, что в спеке по этому поводу ничего нет. Основная проблема - margin collapsing. Так как legend находится на границе fieldset'а, то непонятно, какое поведение выбрать для margin collapsing'а. Все последующие вытекают из первой.

И то, как рендерят все остальные не значит, что они рендерят правильно.

Тестовый пример


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Fieldset</title>
 <style type="text/css">
 	p { background-color: #ccc; margin: 25px 0px; }
 	form { background: #e5e5e5 }
 	fieldset { margin: 25px 0px; background: #ccc; }
	legend { margin: 50px 0px; background: #fc3; padding: 10px; display: block; } 	
	.textLine { margin: 25px 0px; background: #999; }
 </style>

</head>
<body>
<p>Para</p>
<form>
 <fieldset>
  <legend>Legend</legend>
  <div class="textLine">Text line</div>
 </fieldset>
 <fieldset>
  <legend>Legend</legend>
  <div class="textLine">Text line</div>
 </fieldset>
</form>
<p>Para</p>
</body>
</html>

<legend> По спеке является inline-элементом. Но мы ему переопределяем display, и ставим его в block. Так, теперь самый главный вопрос, а куда делись 50px margin-top у филдсета? По какому правилу было вообще проигнорирована эта цифра?

Ладно, представим, что легенда показывается как position: relative.

<div style="margin: 20px 0px; background: #280;">Line</div>
<div style="margin: 40px 0px; background: #280; position: relative; margin-top: -1em;">Line</div>
<div style="margin: 20px 0px; background: #280;">Line</div>

Ага, тут margin снизу у среднего блока срабатывает нормально. Вот и возникает главный вопрос, по каким правилам рендерится legend в опере, ие, хроме, сафари и прочих браузерах?

Думаю, что после внесения корректив в спеку, настанет полная ясность в данном вопросе.

Deacon · July 9, 2009

Ничего не понял, что такое спека, и у legend у меня в коде вообще нет. А относительно по поводу Filedset полезны первые 3 строки сообщения. Можно русифицировать ответ? =)

s0rr0w · July 9, 2009

Ничего не понял, что такое спека, и у legend у меня в коде вообще нет. А относительно по поводу Filedset полезны первые 3 строки сообщения. Можно русифицировать ответ? =)

Спека - спецификация. Документ, который описывает правила отображения документа.

То, что у вас в коде нет legend, не означает, что отменяются правила, которые связаны с отображением fieldset.

Другими словами, нельзя сказать стопроцентно, какой браузер показывает данный элемент правильно, так как нет правила, которое описывает правильность отображение филдсета.

Sign In

Fieldset в Firesfox

Question

Link to comment

Share on other sites

43 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information