Натолкнулся на очередной сюрприз с любимым браузером.
Суть в следующем:
Если текст (прямой поток) обтекает float, например, c левой стороны, то на всем вертикальном протяжении float-а текст в прямом потоке имеет неприятный дополнительный отступ в 3 пиксела (рассматривается ситуация, когда весь блок текста имеет левый margin, не заходит под float по его завершению, а продолжается вниз одной колонкой). Смотрится этот визуальный эффект совсем не радостно.
Есть мнения?
К сожалению не знаю английский, может там лучший способ описан, но я брал текст в дополнительный div. Работает.
[/quote]
Вынужден с Вами не согласиться. Так просто – не работает.
Речь как раз и идет и том, когда текст в дополнительном диве или параграфе.
И насколько и чем этот див или параграф от float-а не отодвигай – трехпиксельный отступ в IE все равно присутствует.
С английским у меня проблем нет, но в последствии я нашел об этом и по-русски:
[Только зарегистрированные пользователи могут видеть ссылки. ]
float в одном div, контент в другом. И вот этот контент берем еще в один div. Тогда работает.Речь как раз и идет и том, когда текст в дополнительном диве или параграфе
[/quote]
Да ладно Вам, только сейчас из принципа попробовал – ноль эмоций.
Примерчик реальный с простым дополнительным дивом не можете привести?
Вложенный див делаем хотя бы 99% ширины от внешнего. Тогда работает.
Фишка я так понимаю в том, что первый див так и идет с отступом, а второй ровняется как надо.
[/quote]
Во-от!Об этом-то Вы сразу и не сказали.
Но зачем плодить дивы? Не проще ли для певого дива просто указать
{height: 1%;} ? + еще кое-какие небольшие коррективы в CSS.
[/quote]
Вы не совсем правильно трактуете ситуацию.
Дело в том, что, как это ни парадоксально, трехпиксельный отступ в данном случае – не у дива, а непосредственно у inline-текста, который находится в этом диве или параграфе. И только на вертикальном протяжении флоата это наблюдается. А сам див с контентом вплотную прижимается к диву с флоатом.
Вот, собственно говоря, предлагаю переработанный и дополненный метод Aykroyd-а (простите за нескромность).
Допустим, имеем три колонки, фон для которых задается методом [Только зарегистрированные пользователи могут видеть ссылки. ].
Левая колонка – news (float), средняя колонка – main (прямой поток) и правая колонка – present (float). Используем следующие правила:
И никаких трехпиксельных отступов в IE. Ни справа, ни слева...Код:#news {width: 250px; float: left;} * html #news {margin-right: -3px;} #present {width: 220px; float: right;} * html #present {margin-left: -3px;} #main {margin: 0px 220px 0px 250px;} * html #main {height: 1%; margin: 0px 217px 0px 247px;}
А скажите пожалуйста, зачем по два раза описываете каждый слой?Originally posted by Aykroyd@Feb 1 2007, 22:05
Вот, собственно говоря, предлагаю переработанный и дополненный метод Aykroyd-а (простите за нескромность).*
Допустим, имеем три колонки, фон для которых задается методом [Только зарегистрированные пользователи могут видеть ссылки. ].
Левая колонка – news (float), средняя колонка – main (прямой поток) и правая колонка – present (float). Используем следующие правила:
И никаких трехпиксельных отступов в IE. Ни справа, ни слева...*Код:#news {width: 250px; float: left;} * html #news {margin-right: -3px;} #present {width: 220px; float: right;} * html #present {margin-left: -3px;} #main {margin: 0px 220px 0px 250px;} * html #main {height: 1%; margin: 0px 217px 0px 247px;}
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
Первый раз для нормальных браузеров, второй раз – для этогосамого...
А т.к. 7-0й IE такого бага не имеет, то получаеться что * html.... прочитает и неправильно будет отображаться?
Так что же с седьмым IE делать? Он же примент код который ему не к чему?
Не поймите превратно (ничего личного), но Вы хоть сами-то поняли, что сказали?
Недаром говорят - поспешишь людей насмешишь! И себя тоже!
Вобщем так...
В связи с этим возникает вопрос. Прочитает он строку
первую
или вторую?Код:#present {width: 220px; float: right;}
Если вторую то тогда будет немного коряво выглядеть текст или слои.. Так как отступы то он не дает, а маргин все равно выполниться.Код:* html #present {margin-left: -3px;}
Как тут быть?
Говорят, что ритуальные пляски с бубном вокруг костра помогают... Или жертвоприношения... Прекратите панику – все, что следует за конструкцией "* html" понимает только IE6...Как тут быть?
[/quote]Originally posted by Aykroyd@Jun 18 2007, 17:11
Говорят, что ритуальные пляски с бубном вокруг костра помогают... Или жертвоприношения... Прекратите панику – все, что следует за конструкцией "* html" понимает только IE6...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
Вот это да.. получаеться что звездочка только для?
С одной стороны это, конечно, хорошо, что в седьмой версии пофиксили баг, основанный на * html (да, IE7 игнорирует данную конструкцию наравне с другими нормальными браузерами), но с другой стороны далеко не все глюки, присутствующие в IE6, исправлены в IE7. Например, IE7, как и IE6 увеличивает отступы между блочными ссылками в списке и имеет старые проблемы со свойством clear...
Поэтому в некоторых случаях теперь приходится дублировать тот или иной хак и для седьмого. Выглядит это примерно так:
Код:* html a {height: 1%;} *+html a {height: 1%;}
Вот спасибо большое! Понял... Но не глубинно.. Случаем не знаете ли где можно почитать что-нить по звездачкам и сопутсвующим.. )))
[/quote]
Мега спасибо! Просветился аж до утра хватит размышлять! А то и дольше!
Айкройад, а как вы думаете, кто эти хаки придумал? Ведь я так понимаю, когда разрабатывали CSS , то вряд ли кто-то задумывался о глючностях браузеров и о их решениях.... Ну по крайней мере седьмого IE точно не было во время разработки CSS 2.
Ваши права
