VPF::Неизвестный padding-top в IE ( compatibility bug)

bz00mmer

Дата 20.3.2008, 13:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.3.2008

Репутация: нет
Всего: нет

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

Код

<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 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

так пойдёт?

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.3.2008

Репутация: нет
Всего: нет

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

bars80080

Дата 20.3.2008, 14:59 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.3.2008

Репутация: нет
Всего: нет

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

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

bars80080

Дата 20.3.2008, 16:26 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

bz00mmer

Дата 20.3.2008, 16:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.3.2008

Репутация: нет
Всего: нет

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

Это сообщение отредактировал(а) bz00mmer - 20.3.2008, 16:41

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »