http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1258478347.html <p>Кто бы, что не говорил, но "норвежская красавица" - OPERA, браузер не классический, и чем чаще с ним работаю, тем больше мое мнение об его способностях верно работать с самыми простыми стилевыми правилами подвергается вполне обоснованным сомнениям.</p> <p>Пришлось, как-то делать простую, обычную казалось бы вещь.</p> <p>Скриншот</p> <img src="i/control/opera.png" style="display:block;margin:10px auto;width:450px;height:313px;" alt="макет"> <p>ТЗ проще не куда:</p> <ul> <li>Плавающая ширина всех колонок.</li> <li>Колонки равной высоты.</li> <li>Header и горизонтальное меню по ширине вровень с областью контента.</li> <li>Все блоки и колонки имеют индивидуальные по цвету - border и фоновую заливку.</li> <li>Сто процентная высота макета.</li></ul> <p>Так как метки-якоря в данном случае не предусмотрены, то для создания иллюзии одинаковой высоты колонок, принято решение использовать:</p> <pre class="pre"> margin-bottom:-32767px;padding-bottom:32767px;</pre> <p>Тут надо сделать маленькое отступление.</p> <p>Многие верстальщики предпочитают начинать верстку в самых продвинутых браузерах. У меня же несколько иной подход.</p> <p>Все начинается в проблемных – IE6(7) и уж когда все доведено до ума, то просмотр в наиболее популярных и не значительная корректировка часто сводящаяся к переносу некоторых стилевых правил для IE6(7) в секцию хаков.</p> <p>Единственным исключением является OPERA. Она в списке самая последняя и всегда жду от нее подвоха. Причем, мало что меняется от версии к версии, а это печально :(</p> <p>Так случилось и на этот раз.</p> <p>Говорить о том, что проценты это головная боль верстальщика нет никакого смысла и без индивидуальных стилевых правил практически под каждый браузер при любом раскладе не обойтись, но задача и не ставилась в данном конкретном случае добиться чуть ли не по пиксельной точности.</p> <p>А вот поднять правую колонку на уровень header без пинка под зад "горячо" любимой OPER’е не удалось :)</p> <p>Не привожу ни html-кода ни стилей.</p> <p>На примерах все достаточно наглядно и убедительно показано и они говорят сами за себя.</p> <p><a href="i/control/cr_start.htm">Пример</a> № 1 – в OPER’a бесконечная вертикальная прокрутка.</p> <p><a href="i/control/cr_end.htm">Пример</a> № 2 - везде все в норме, если не считать погрешностей в интерпретации процентных величин различными браузерами.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258478347.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258478347.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258478347.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258478347.html">All Comments</a></div> <!-- RSS_link_to_post end --> Tue, 17 Nov 2009 23:19:07 GMT