Часто, когда мы используем плавающие блоки, для того, чтобы нижеследующий блок расположить под ними без смещения вверх за счет флоатов, мы создаем дополнительный html-элемент, к которому применяем свойство clear: both, например, так, как это сделано в трехколоночном макете с помощью CSS: .clear {clear: both} В ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом ...
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью ...
Комментарии (24)
можно писать проще
.clear {clear: both; font-size:0;}
:)
Неа, ваш способ не помогает. Возможно, он в некоторых случаях и убирает отступ, но решение не универсальное. Можете прямо на моем примере проверить.
так рабочий способ или нет, лезть мне в код лишний раз?
Мой конечно рабочий. Пример-то на что дан?
Привет, Дима.
Сейчас, тоже перехожу на этот метод.
Победить IE не просто ;)
Но еще жив курилка ;)
Дмитрий, добрый день! Может я чего не то делаю, но по кнопочке «Читать через Яндекс» твой фид в мою ленту не добавляется категорически. Я-лента съела только фидбурнеровский фид. Но это так, лирика :) А теперь по теме — спасибо за разжеванную кашу, буду есть :) Если не против, есть пара вопросов по резиновой верстке. Хочу отцентровать двухколоночную резину. В ФФ и ИЕ7 все работает, но тухнет на шестом ИЕ — он растягивает на всю ширину страницы. Башку сломал уже, что с ним делать. Если не лень, посмотри, плиз, вот на эту страничку — tokenoman.ru/layout.html Там есть еще одна печаль с шестым эксплорером, но это уже так, мелочи :) Спасибо! ;)
Привет, Бомж2 :)
Так это нормально :), мой фид же через него как раз и пропускается, поэтому идет редирект.
По поводу всего остального отвечу примерно вечером в воскресенье, до этого времени меня не будет.
Обычно делают так. clear {clear: both; font-size:0;line-height:0}
Yuriy, я ж говорю — не работает этот способ. Проверьте на моем примере.
Да, действительно, в Вашем примере не работает. Но тогда есть еще один способ :) Для этого необходимо div’ы content и right взять в div «обертку» и ему задать width:100% и overflow: hidden. Тогда необходимость в div’е c clear: both отпадает и отступа тоже нет.
Yuriy, в макетах, которые я верстаю, content и right как раз всегда обернуты в див со 100% шириной, но overflow для него я никогда не применял, поэтому спасибо за метод, обязательно попробую ;).
О, сработало! Вчера весь вечер промучилась, не знала что делать, а тут за минуту помогло. Спасибо большущее!
Пожалуйста, Existenciya.
.clear-invisible {clear: both; height: 0; overflow: hidden; font-size: 0; padding: 0px; margin: 0px; line-height: 0; width: 100%}
*+html .clear-invisible {clear: none}
* html. clear-invisible {clear: none}
У кого не сработали все предыдущие способы — даю самый рабочий :)
Для IE срабатывает комбинация width: 100% и clear: none (эмулируя clear: both)
Причем у меня все вышеописанные способы не срабатывали.
antoxa! Спасибо огромное! Я уж не чаял надежды победить ослов… Причем описанный dimox’ом метод меня всегда выручал, а тут столкнулся с необходимостью, после каждого второго дива делать clear… И никак ослы не хотели меня понять (перед первым clear делали отступы, как будто у него маржин или паддинг прописан, а остальные как надо складывали. впрочем это я уже разошелся на радостях. спасибо) =)
Что-то знакомое. Мне однажды показывали подобный глюк. А вот width: 100% и clear: none никогда не пробовал, поэтому теперь буду иметь в виду. antoxa, спасибо! ;)
Спасибо огромное за статью.
Сделала сайт по шаблону и движку Joomla и старый шаблон меняла под свой дизайн. Просто измучилась с различным отображением в других браузерах и IE. А в коде уже был прописан. clear {
clear: both;}, я вообще не понимала зачем это прописано. Добавила туда то, что вы советуете и моя проблема с различным отображением в браузерах решилась.
Спасибо!!!
я вот для себя вывел самое рабочее решение… пока не подводило
.clear {
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
Спасибо-попозже потестирую)
Вот универсальный способ:
=========CSS===========
.clearbar {
clear: both;
font-size:0;
line-height:0;
border: none;
height:0;
}
=======================
========HTML==========
=======================
ВАЖНО!
Если написать просто (без пробела), то в ie6 высота будет все равно 2 пиксела :)))
Был замечено, что line-height:0; вызывает в IE8 однопиксельный пробел все-таки, в то время как в 6−7 нормал. Удалил стало везде хорошо. Может конечно специфика мудреной верстки где применял это была такая, но тем не менее.