Всем привет.

Знач есть вот такая вот страница (Сорри, вопрос уже неактуален, см. последующие посты - прим. автора). Оранжевый блок имеет процентную ширину и сплавлен вправо (float: right;). Тем не менее, по какой-то непонятной причине Firefox считает для себя возможным грубо игнорировать неприкосновенность сплавленного контента и нахально залазит прямо поверх него. Единственное, что его удерживает от более глубокого наползания - это логотип чуть выше справа, который тоже определен как float: right; Если подвигать ширину окна браузера, то это будет хорошо заметно. Что характерно, нижеследующие строчки уже признают суверенитет оранжевой территории.

Все вместе это смотрится вот так:



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

В общем, предлагаю вооружиться Firebug'ом и совместными усилиями победить зловредного глюка, а то и обоих сразу. Как обычно, ответы потенциально плюсабельные.


Это сообщение отредактировал(а) Stampede - 28.10.2008, 19:26

Методом эмпирического научного тыка (в означенном Файрбаге) удалось выяснить, что на нарушение границ этот самый абзац соблазняет нижний margin от логотипа - так подло ведет себя только та строчка, которая хотя бы частично натыкается на него. Если этот margin обнулить, выставив взамен эквивалентный верхний margin для .feed - глюк пропадает. Объяснить сходу не берусь, нужно перештудировать нюансы блочной модели для float-ов... хотя интуитивно по всему напрашивается, что это таки баг Лисы;)

Ай да SelenIT'ушка, ай да молодец! Ущучил гада 

К сожалению, предложенное решение не годится: "на это я пойтить не могу" (с)

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

Так что вопрос остается открытым.

Еще можно опустить основной текст хотя бы на 5 пикселей ниже (в IE8, кстати, отчего-то само так получается;) - тогда он сразу будет обтекать только .feed, а не логотип. Потому что, насколько я понял, решение "кого обтекать" браузер принимает, ориентируясь по верхнему краю обтекающего блока...

Кстати, Safari3.1/Win и Chrome почему-то ведут себя так же, как FF3... может, оно действительно не баг, а неприятная особенность стандарта?..

точнее баг стандарта?

Внимание, товарищи, есть новости. Можно сказать, хорошие.

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

С учетом вновь открывшегося обстоятельства, после серии опытов в стиле "научного тыка" было сформировано более отчетливое представление о желательном порядке сплавливания и склиривания элементов интерфейса, которое и было затем воплощено в виде кода, работющего консистентно и безглючно во всех основных браузерах.

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

Вот здесь вот я выделил наиболее квинтэссенциальную часть разметки, которая вживую демонстрирует суть проблемы, и которую можно открыть/скачать и поиграться на досуге в свое удовольствие. Примечательна завидная кроссбраузерная поддержка сей "особенности" стандарта, не исключая даже шестого осла. Всем бы полезным особенностям такую поддержку! 

На этой позитивной ноте, пожалуй, и закончу. Всем спасибо за внимание, и до новых встреч в эфире!

Это сообщение отредактировал(а) Stampede - 28.10.2008, 19:51