Доброго времени суток! При оформлении меню использую разделительные линии border, в ячейке таблицы меню делаю отступы, проблема в том, что у opera и ie эти отступы отличаются IE: Opera: Стиль, применяемый к ячейке меню: [css] td.menu { padding: 3px 0px 2px 5px; border-bottom: solid 1px #A6C697; border-top: solid 1px #A6C697; } [/css] подскажите пожалуйста, как можно обойти это несоответствие в padding?
Нормально у ИЕ с отступами, а у Оперы - нет. Кстати, какая версия Оперы (у меня 9.23 и вроде такой проблемы, тьфу-тьфу, на этой версии нет)? Попробуй margin добавить, в два раза уменьши padding и точно такой же сделай margin: Код (Text): padding: 1.5px 0px 1px 2.5px; margin: 1.5px 0px 1px 2.5px;
lexa У Оперы были какие-то проблемы с отступами, но они проявлялись только если жестко прописывать ширину или высоту у ячейки - вот тогда в зависимости от версии, ширина/высота рассчитывалась с учетом отступов или без. Но это вроде не из нашей оперы. Rus Небольшой изолированный пример?
Rus Это я тебя просил привести такой пример чтобы мы могли у себя посмотреть и предложить решение. У меня почему-то ощущение, что дело не в паддинге, а в чем-то еще. В общем нужен пример.
Dagdamor, твоё ощущение тебя не подвело! В общем, на "чистом листе" создал новую таблицу и применил вышеприведённый стиль к ячейке данной таблицы. "Изолированный" пример: HTML: <style type="text/css"> td.menu { padding: 2px 0px 3px 5px; border-bottom: solid 1px #000000; border-top: solid 1px #000000; } </style> <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; "> <tr> <td class="menu"> <a href="#">Первая ссылка</a> </td> </tr> <tr> <td class="menu"> <a href="#">Вторая ссылка</a> </td> </tr> <tr> <td class="menu"> <a href="#">Третья ссылка</a> </td> </tr> </table> К моему большому удивлению, разницы в padding я не увидел. Opera и IE отображали меню совершенно одинаково! Проблемы начинаются, когда я начинаю стилизовать гиперссылки данного меню. Стиль применяемый к гиперссылкам: [css] a:link, a:visited { font-family: Arial, Georgia, sans-serif; font-size: 12px; color: #006633; } a:hover { color: #FF6600; } [/css] В общем, меня это еще больше запутало
Rus Попробуй ссылке жестко задать высоту текста (свойство line-height). И вообще-то надо не только у "a:link", "a:hover" и т. п. элементов задавать свойства, но и у самого "a" тоже.
попробуйте, как уже советовали, выставить отступ в ссылках td.menu { padding: 0; } .menu a { display: block; padding: 2px 0px 3px 5px; } кроме того, проверьте DOCTYPE
Ti, спасибо помогло! Я пробовал отступ в ссылках ставить как посоветовал lexa, но display: block не указывал, поэтому ничего и не выходило. А теперь всё пучком! Решение моей проблемы: [css] a:link, a:visited { margin: 4px 0px 6px 5px; display: block; font-family: Arial, Georgia, sans-serif; font-size: 12px; color: #006633; } td.menu { border-bottom: solid 1px #000000; border-top: solid 1px #000000; } [/css]