Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Неизвестный padding-top в IE ( compatibility bug)

Автор: bz00mmer 20.3.2008, 13:16

Форумчане, может, кто сталкивался с проблемой или сможет найти решение?
Есть меню навигации:

Код

<style>
/*menu*/
ul.m{width:178px;margin:0px;padding:0px;border:1px solid #2080C0;border-top:0px;}

ul.m li{border-top:5px solid #2080C0;list-style:none;}

ul.m a{font:bold 12px verdana,helvetica,sans-serif;color:#666677;display:block;width:152px;
padding:4px 8px 4px 8px;border-right:10px solid #2080C0;background:#FFFFDD;
text-decoration:none;text-align:right;}

ul.m a:hover,ul.m a.hl{text-decoration:none;border-color:#ff9000;color:#FFFFDD;background:#104060;}

/*submenu*/
ul.m ul{padding-left:0px;margin-left:0px;}

ul.m ul a{background:#2080C0;text-align:left;color:#FFFFDD;font-size:10px;}


/*ie bugfix*/
.b{width:152px;cursor:hand;}
</style>


<ul id="m" class="m">
<li><a href="?m0"><span class="b">Меню пункт</span></a></li>
 <ul id="m0">
 <li><a href="?m01"><span class="b">Подменю пункт 1</span></a></li>
 <li><a href="?m02"><span class="b">Подменю пункт 2</span></a></li>
 </ul>
</ul>

Слева - вид в IE, справа - Gecko & Opera.

Пытался для каждого из элементов в ноль и padding ставить, и margin(хоть и не в нём дело, думаю) - нет толку.

Какие есть решения-соображения?

Автор: bars80080 20.3.2008, 13:43

так пойдёт?

Код


<style>
/*menu*/

ul.m{width:178px;margin:0px;padding:0px;border:1px solid #2080C0;border-top:0px;}

ul.m li{border-top:5px solid #2080C0; background:#2080C0; list-style:none;}

ul.m a{font:bold 12px verdana,helvetica,sans-serif;color:#666677;display:block;width:152px;
padding:4px 8px 4px 8px;border-right:10px solid #2080C0;background:#FFFFDD;
text-decoration:none;text-align:right;}

ul.m a:hover,ul.m a.hl{text-decoration:none;border-color:#ff9000;color:#FFFFDD;background:#104060;}

/*submenu*/
ul.m ul{padding-left:0px;margin-left:0px;}

ul.m ul a{background:#2080C0;text-align:left;color:#FFFFDD;font-size:10px;}


/*ie bugfix*/
.b{width:152px;cursor:hand;}
</style>


<ul id="m" class="m">
<li><a href="?m0"><span class="b">Меню пункт</span></a></li>
 <ul id="m0">
 <li><a href="?m01"><span class="b">Подменю пункт 1</span></a></li>
 <li><a href="?m02"><span class="b">Подменю пункт 2</span></a></li>
 </ul>
</ul>

Автор: bz00mmer 20.3.2008, 13:56

bars80080, так сейчас и задумано, но это - маскировка, а не решение.
Сложность в том, что реальное меню - больше трёх пунктов и заметно отличается по высоте...
Да и решение найти было бы интересно...

Автор: bars80080 20.3.2008, 14:59

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

Код


<style>
/*menu*/

ul.m{width:178px;margin:0px;padding:0px;border:1px solid #2080C0;border-top:0px;}

ul.m li{border-top:5px solid #2080C0; list-style:none;}

ul.m a{font:bold 12px verdana,helvetica,sans-serif;color:#666677;display:block;width:152px;
padding:4px 8px 4px 8px;border-right:10px solid #2080C0;background:#FFFFDD;  line-height: 12pt;
text-decoration:none;text-align:right;}

ul.m a:hover,ul.m a.hl{text-decoration:none;border-color:#ff9000;color:#FFFFDD;background:#104060;}

/*submenu*/
ul.m ul{padding-left:0px;margin-left:0px;}

ul.m ul a{background:#2080C0;text-align:left;color:#FFFFDD;font-size:10px; }


/*ie bugfix*/
.b{width:152px;cursor:hand;}
</style>


<ul id="m" class="m">
<li><a href="?m0"><span class="b">Меню пункт</span></a></li>
 <ul id="m0">
 <li><a href="?m01"><span class="b">Подменю пункт 1</span></a></li>
 <li><a href="?m02"><span class="b">Подменю пункт 2</span></a></li>
 </ul>
</ul>

или тебе наоборот, надо поставить эту линию в ФФ и опере?

Автор: bz00mmer 20.3.2008, 16:14

О высоте я и не задумался, считал, что это левый отступ какой-то..!
Огромное спасибо, bars80080!

Один лишь вопрос остается: почему высота в пунктах, а не в пикселах?

Автор: bars80080 20.3.2008, 16:26

честно говоря, я просто проглядел, мне показалось, что у тебя высота шрифта в пунктах, (ну если надо в пикселях, то 16пкс)

Автор: bz00mmer 20.3.2008, 16:40

Все размеры указываю в пикселах, величина - абсолютная, с ней проще. Огромное спасибо, ещё раз, bars80080.