By
Ник Ример
Доброго времени суток, господа верстальщики, дизайнеры и все-все-все!
Помогите, пожалуйста, разобраться, где может крыться проблема с гадким браузером IE6, на который извечно приходится натягивать тройной презерватив.
Работаю с CMS Joomla, это мой не первый сайт, но ошибка подобного рода наблюдается мной впервые.
Шаблон делаю сам с нуля. Никаких артистиров, никаких генераторов CSS и прочих "говнокодогенераторов", всё вручную в Notepad++
Однако, опыт ещё не столь велик, чтобы чувствовать себя хотя бы продвинутым, не то что гуру
Вот так всё должно выглядеть (так это выглядит в браузерах Google Chrome и Mozilla Firefox):
А так это выглядит в IE6:
Хорошо заметна синяя полоса размером 4 пикселя под header-ом и над div-ом с колонками.
Почему она там появляется? Как от неё избавиться? Синий цвет находится в коде background-color у самого хедера, т.о. хедер почему-то вытянут по вертикали на 4 пикселя больше положенного.
Хедер имеет заполняемый с repeat-x фон, у которого нижний пиксель красного цвета (хорошо видна красная полоска; сделал, чтобы видеть чётко нижнюю границу).
Высота фона, картинки и самого хедера совпадают и имеют размер 61px
Я поизвращался, двумя путями (по раздельности, не одновременно!) сделал так, чтобы в IE6 всё отображалось, как надо:
1) в стиле хедера прописал свойство margin-bottom: -4px;
2) в теге <img> там, где ставится картинка, принудительно поставил высоту не 61px, а 57px
В этих случаях в IE6 всё становилось "ёлочкой", т.е. как надо. Но во всех остальных браузерах в первом случае хедер уменьшался на 4 пикселя, соответственно обрезались картинка и фон, а во втором при нормальном размере хедера картинка получалась сжата по вертикали и приподнята над нижним краем на 4 пикселя, что тоже есть не айс.
Как обычно, хочется, чтобы везде по-максимуму работало, а на таких простыв, вроде, вещах уже косяки.. Если кто с таким сталкивался, пожалуйста, помогите.
Работоспособность шаблона пока проверялась только на трёх браузерах: Chrome и Firefox последних версий, и базовый для WinXP - Internet Explorer 6 (CURSE MICROSOFT!!! ).
Читал ещё вот такую статью: http://dimox.name/10-fixes-for-ie6/
Ничего не знаю про компетенцию автора, но попробовать стоило. Конкретно из того, что там написано, воспользовался тем, что приписал display: inline; во все блоки, в которых установлен параметр float. Так как нижеидущие столбцы у меня именно такие, я туда и нафигачил. Но ничего не заработало, а смысл самого этого кода (display: inline;) мне малопонятен..
P.S. Если потребуется ещё какая-то информация, типа кодов, всё любезно предоставлю, секретов у меня нет. Может узнаю заодно, где у меня какие огрехи. Хотя я там ещё не успел много наворотить, это фактически только первичная разметка.