Горизонтальное меню и бордер изображения

[ared]

Здравствуйте!
Есть горизонтальное меню
Меню.jpg

Вот html его вывода

<div id="menu"><ul class="menu" id="mmm">
<li class="item1"><a href="http://xn----7sb3ahia0b.xn--p1ai/"><span>Главная</span></a></li>
<li class="item5"><a href="/novinki.html"><img src="/images/stories/novinki5.gif" alt="novinki" /></a></li>
<li class="item6"><a href="/kontakt.html"><span>Контакты</span></a></li>
<li class="item30"><a href="/katalog.html"><span>Каталог</span></a></li>
<li class="item35"><a href="/sistemaskidok.html"><span>Система скидок</span></a></li>
<li class="item42"><a href="/dostavka.html"><span>Доставка</span></a></li>
<li class="item36"><a href="/articles.html"><span>ЭТО ИНТЕРЕСНО!</span></a></li>
</ul></div>

есть css

@font-face {
font-family: 'AGCooperCyrItalic';
src: url('agcoopercyr_italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {font-family: 'Times New Roman', Verdana, sans-serif; font-size: 14px; margin: 0; padding: 0; color:#393939;}
html, body {height: 100%; width: 100%;}

#menu {background:url(../images/menubg.jpg) 0 0 repeat-x; height:46px;}

#menu {
position:relative;
bottom:0px;
margin-top:0px;
padding-top:0px;

}

#menu ul {
width:1100px;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
}

#menu ul li {
display:block;
float:left;
background-image:url(../images/separator.gif);
background-repeat: repeat-y;
background-position: right;
font-family:"AGCooperCyrItalic","Times New Roman";
text-align: center;
vertical-align:middle;
height:46px;
color:#fff;
font-size:16px;
padding-top:0px;
padding-left:20px;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}

#menu ul li a {
text-decoration:none;
color:#fff;

}


#menu ul li a:hover{color:#F6EB04;
}

#menu ul li a img {
border:0;
}

2 вопроса.
1. Почему у картинки НОВИНКИ не удаляется border?
2.Почему у остальных пуктов меню не выравнивается по вертикале по центру текст?

Такой косяк только в IE9. В Опере,Хроме,Фоксе все ОК. Причем если запускаю на локальном сервере то border у картинки НОВИНКИ пропадает. На хостинге торчит. Выравнивание не работает ни локально ни на хостинге. Прав на файл css на хостинге достаточно.

[Лубышев]

#menu ul li {
display:inline-block;
zoom:1;
vertical-align:middle;
background-image:url(../images/separator.gif);
background-repeat: repeat-y;
background-position: right;
font-family:"AGCooperCyrItalic","Times New Roman";
text-align: center;
height:46px;
color:#fff;
font-size:16px;
padding-top:0px;
padding-left:20px;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}

.menu li a img {border:none;}

если не сработает то попробуйте принудительно:

.menu li a img {border:none!important;}

[ared]

border убрался, спасибо!

А вот выравнивание по вертикали по цетру в IE так и не работает. В остальных все ОК.

Я думал может что со шрифтом в font-face. Попробовал Arial. Круто...с ним выравнивание нигде не работает. А это-то почему?

[Naive]

Вертикальное выравнивание не работает для блочных элементов (они не являются ячейками таблицы и не могут находиться в потоке со строчными элементами).
То, что в других браузерах выглядит нормально — просто удачное стечение обстоятельств, vertical-align в этом роли не сыграл.

[Лубышев]

Вертикальное выравнивание не работает для блочных элементов

display:inline-block;
zoom:1;

Это не совсе блочный элемент) если топикстартер сделал все верно то должно сработать

[ared]

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

В итоге сделал так:

#menu ul li {
display:inline-block;
background-image:url(../images/separator.gif);
background-repeat: repeat-y;
background-position: right;
vertical-align:top;
height:46px;
color:#fff;
font-size:16px;
padding-top:0px;
padding-left:20px;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;

}

#menu ul li a {
text-decoration:none;
color:#fff;
line-height:2;
}

Теперь по крайней мере в блоке li блоки гаратировано выровнены по верхней линии. А дальше в блоке li a line-height двигает ссылки вниз. Поскольку у меня известна высота менюшки, то экспериментальным путем значение 2 выводит их на середину. Ну а с IE конечно засада. Он двигает ссылки от верхнего края, но не на середину. Ну хотя бы от верхнего края отлепил и то хорошо. Для него значение 3 выводит на середину. Вот если бы в css были условные комментарии как в HTML...

Вариант с zoom не заработал.

[Naive]

Сообщение от Лубышев

Это не совсе блочный элемент) если топикстартер сделал все верно то должно сработать

Я говорил про ТС, не про твой коммент)

[Лубышев]

zoom:1;

поставь... это типа для IE ото он не понимает инлайн-блок

[Naive]

он и с зумом не поймет...
чтобы достучаться до ослика, нужно объявить блок строчным, затем зумом содержимое слепится в блок и по логике вещей и получится обычный инлайн-блок:

li {
  *display:inline;
  zoom:1;
}