атрибут float одновременно меняет позиционирование на абсолютное?

hf3 · August 19, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<div style="border:2px black solid;">родительский элемет
	<div style="float:left;">Левое Бла - бла - бла</div>
	<div style="float:right;"> Правое Бла бла бла</div>
</div>
</body>
</html>

ТАк и задумано, что с атрибутом флоат дочерние дивы вываливаются из родительского?

з.ы. в 6 и 7 ИЕ они не вываливаются… Что имхо более логично…

rash · August 19, 2009

ТАк и задумано, что с атрибутом флоат дочерние дивы вываливаются из родительского?

Они должны "вываливаться", но это не из-за абсолютного позиционирования, а именно из-за флоата. Он вырывает элементы из потока.

А в ослах вы, вероятно, где-то случайно hasLayout включили...

psywalker · August 19, 2009

Обрамляющий контейнер схлопывается, поэтому чтобы этого не происходило, всегда ставь ему Оверфлоу: хидден, а для ИЕ6 Зуум:1

hf3 · August 19, 2009

Ок. Спасибо

mishka · August 21, 2009

Обрамляющий контейнер схлопывается, поэтому чтобы этого не происходило, всегда ставь ему Оверфлоу: хидден, а для ИЕ6 Зуум:1

разве "зуум" валиден?

Ставьте overflow:hidden;

а для ие6 чтобы overflow:hidden; работал надо дополнительно ширину или высоту, если нет возможности поставить width:100%; (есть маргины/паддинги боковые), а также нет возможности фиксированно задать ширину, то ставте height:1%;

Но в этом случае тоже возможен баг если у родителя высота фиксированная(тогда для ие6 надо прописать только высоту в 1% и overflow:hidden; заменить на overflow:visible; это только для ие6)

Зато валидно

Edited August 21, 2009 by mishka2

psywalker · August 21, 2009

разве "зуум" валиден?
Ставьте overflow:hidden;
а для ие6 чтобы overflow:hidden; работал надо дополнительно ширину или высоту, если нет возможности поставить width:100%; (есть маргины/паддинги боковые), а также нет возможности фиксированно задать ширину, то ставте height:1%;
Но в этом случае тоже возможен баг если у родителя высота фиксированная(тогда для ие6 надо прописать только высоту в 1% и overflow:hidden; заменить на overflow:visible; это только для ие6)
Зато валидно wink.gif

Вот на всю эту запись ты потратил время в пустую, потому что zoom:1; просто достаточно записать в стили специально предназначенные для ИЕ6 и всё будет красиво и валидно

mishka · August 21, 2009

Вот на всю эту запись ты потратил время в пустую, потому что zoom:1; просто достаточно записать в стили специально предназначенные для ИЕ6 и всё будет красиво и валидно

хм, большое спасибо... както сразу и непридумал

наверное потому что привык все по возможности в одном файле делать...

Edited August 21, 2009 by mishka2

hf3 · August 23, 2009

А разве лучший валидатор это не браузер?)

Я конечно понимаю , что правило нужны, ну если следовать только им получается переподвыперт…

ну эт имхо само собой

s0rr0w · August 23, 2009

А разве лучший валидатор это не браузер?)

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

hf3 · August 24, 2009

Ну это понятно. Но ведь страничка верствается для бразуера, а не для валидатора…

Searcher · August 24, 2009

Я бы IE6 не назвал бы валидатором )))

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

Так что верстайте для браузера, проверяйте в валидаторе и тогда будет все ок. )))

s0rr0w · August 25, 2009

Ну это понятно. Но ведь страничка верствается для бразуера, а не для валидатора…

И с выходом более современного браузера вы будете переделывать раз за разом код?

Вам не жалко своего времени?

hf3 · August 25, 2009

а для ие6 чтобы overflow:hidden; работал надо дополнительно ширину или высоту, если нет возможности поставить width:100%; (есть маргины/паддинги боковые), а также нет возможности фиксированно задать ширину, то ставте height:1%;
Но в этом случае тоже возможен баг если у родителя высота фиксированная(тогда для ие6 надо прописать только высоту в 1% и overflow:hidden; заменить на overflow:visible; это только для ие6)

В данном случае на это времемни уйдет больше

Чем одну невалидную строчку Зуум. Валидность ведь не самоцель. Не надо на ней закицливаться… - Так что ИМХо нужно просто смотреть по ситуации

mishka · August 25, 2009

Ситуация такова: код - лицо фирмы. И это нетот случай на котором можна допустить невалидность кода.

Но я вполне согласен использовать zoom, если невозможно использовать overflow совместно с высотой/шириной, но только в отдельном css для ие6

Edited August 25, 2009 by mishka2

rash · August 25, 2009

Ситуация такова: код - лицо фирмы.

Неверно. Сайт - лицо фирмы.

mishka · August 25, 2009

Сайт который мы делаем это лицо той фирмы для которой мы его делаем.

А наш код это наше лицо.

s0rr0w · August 25, 2009

Сайт который мы делаем это лицо той фирмы для которой мы его делаем.
А наш код это наше лицо.

Вы даже готовы работать в ущерб себе, только бы код был валиден?

hf3 · August 25, 2009

А наш код это наше лицо.

Опять же палка о двух концах, одна невалидная строчка или валидное награмождение в котором без литра кофе не разберешься…

mishka · August 25, 2009

скажите что тут сложнее?

div{
	overflow:hidden;
	height:1%;
}
это валидно

div{
	overflow:hidden;
	width:100%;
}
это тоже валидно

или

div{
	overflow:hidden;
	zoom:1;
}
а это невалидно

А случаи когда нельзя указать ни ширину ни высоту возникают не так уж и часто.

и сколько вам литров кофе надо?

А если что то попробуй расскажи заказчику почему код невалиден....

Edited August 25, 2009 by mishka2

hf3 · August 25, 2009

Ну ладно) убедил)

mishka · August 25, 2009

Еще я увидел такую запись:

*{zoom:1;}

и это вынесенно в отдельный файл для ие6. Как по мне так очень простое и логичное решение. Но это потому что я незнаю всех тонкостей использования zoom.

Подскажите это может както плохо повлиять на отображение странички в ие6?

rash · August 25, 2009

Опять же палка о двух концах, одна невалидная строчка или валидное награмождение в котором без литра кофе не разберешься…

Не иронизируйте.

Одна невалидная строчка, делающая код более понятным, доступным и надежным - стоит того, чтобы разрушить валидацию.

Если это в ущерб - зачем вообще пытаться что-то делать?

hf3 · August 25, 2009

ну немножко утрировал… самую малость)

mishka · August 25, 2009

так ответит ктонибудь на мой вопрос?

*{zoom:1;}

это может както плохо повлиять на отображение странички в ие6? И вообще на его работу

hf3 · August 25, 2009

это может както плохо повлиять на отображение странички в ие6? И вообще на его работу

Я не сталкивался с такими проблемами

Игорь Ермаков · August 26, 2009

Глупости, float и абсолютное позиционирование не совместимы, а у вас скорее всего проблема в размерах. Укажите фиксированную ширину, для обоих элементов.

Sign In

атрибут float одновременно меняет позиционирование на абсолютное?

Question

Link to comment

Share on other sites

28 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