Проблема в IE и Maxthon

[bravada j]

Приветствую всех!

Столкнулся вот с такой проблемой. Прописываю бэкграунд в стилях к меню навигации, таким вот макаром :

{

background-image: url(images/a3.gif);

background-repeat: repeat-x;

background-position: bottom;

padding: 1em 2.5em 2em 2.5em;

}

В FF, Opera, GoogleChrome всё нормально, так сказать по задумке, а в IE(7) и Maxthon наперекосяк. Для наглядности привожу два скрина:

FF, Opera, GoogleChrome :

IE(7) и Maxthon:

Насколько я могу понять ни IE ни Maxthon почему-то не хотят понимать "background-position". Так ли это? Или же причина кроется в чём то другом?

Посоветуйте как с этим бороться.

Заранее всех благодарю.

[Vlad]

Лучше записывать кратко

background: url(images/a3.gif) repeat-x left bottom;

padding: 1em 2.5em 2em 2.5em;

Но еще нужен HTML-код приведенного блока, мне кажется, что дело не в фоне, а в полях вокруг заголовка.

[bravada j]

Лучше записывать кратко

background: url(images/a3.gif) repeat-x left bottom;

padding: 1em 2.5em 2em 2.5em;

Но еще нужен HTML-код приведенного блока, мне кажется, что дело не в фоне, а в полях вокруг заголовка.

Влад спасибо за ответ. Пробовал краткий синтаксис, как Вы показали - к сожалению не помогло. У меня вообще возникли сомнения понимает ли IE CSS-аргумент "background-position"?

Вот HTML и CSS к нему:

<div id="menu">

<ul>

<li class="current_page_item"><a href="http://libertad.org.ua" title="Home">Главная</a></li>

<li class="page_item page-item-15"><a href="http://libertad.org.ua/?page_id=15" title="слово автора">слово автора</a></li>

<li class="page_item page-item-18"><a href="http://libertad.org.ua/?page_id=18" title="фотогалерея">фотогалерея</a></li>

<li class="page_item page-item-42"><a href="http://libertad.org.ua/?page_id=42" title="добавить пост">добавить пост</a></li>

<li class="page_item page-item-48"><a href="http://libertad.org.ua/?page_id=48" title="обратка">обратка</a></li>

</ul>

</div>

/* Menu */

#menu

{

background: url(images/a3.gif) repeat-x left bottom;

padding: 1em 2.5em 2em 2.5em;

}

#menu ul

{

list-style: none;

}

#menu li

{

display: inline;

}

#menu li a

{

font-size: 1.1em;

font-weight: bold;

text-transform: lowercase;

color: #5D5F53;

text-decoration: none;

margin-right: 1em;

}

#menu li a:hover,

#menu li a:active,

#menu li.current_page_item a

{

color: #6B7E09;

border-bottom:#6B7E09 1px solid;

}

Я кажется нашёл решение - задал фиксированную высоту в 35px для #menu, конечно гибкость при этом страдает, но другой альтернативы я не вижу.

Это тема для wordpress, хочется сделать красиво....

Быть может вам будет интересен этот конкурс

С уважением, Иван.

[Vlad]

у меня приведенный код корректно отобразился в IE7-8 и FF. Фон выравнивается по нижнему краю, высота блока одинакова.

[bravada j]

у меня приведенный код корректно отобразился в IE7-8 и FF. Фон выравнивается по нижнему краю, высота блока одинакова.

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

Будемс искать...

Спасибо за поддержку Влад