Не работает меню в IE7

[Olekh]

В IE7 ,XP, разрешение экрана 1280х800 (ноутбук), при уменьшении Ctrl - и увеличении Ctrl +, ссылки в меню съезжают влево, линии остаются на месте. В Firefox 4 и 5 работает нормально. В IE8 на персональном компьютере работает нормально. У меня не получается сделать, так чтобы не разъезжалось, может кто-то поделится опытом. Заранее благодарю. Верстку шаблона мне делал фрилансер, я немного понимаю в html и css, но найти где ошибка не получается.

http://savepic.org/1908623.png

http://savepic.org/1962894.png

Код меню в index.html

<div id="menu">
<div class="headsl">{$box_SEARCH}</div>
<ul>
  <li{$1}><a href="{$mainpage}">Главная</a>
  </li>
  <li{$2}><a href="shop_content.php?coID=4">О магазине</a>
  </li>
  <li{$3}><a href="shop_content.php?coID=6">Акции и скидки</a>
  </li>
  <li{$4}><a href="shop_content.php?coID=1">Оплата и доставка</a>
  </li>
  <li{$6} class="last"><a href="shop_content.php?coID=7">Контакты</a>
  </li>
</ul>
<div class="headsr">
  <div align="center"><img src="{$tpl_path}img/homemapmail.png" width="111" height="14" border="0" usemap="#Map"  />
      <map name="Map" id="Map">
        <area shape="rect" coords="0,4,11,12" href="index.php" />
        <area shape="rect" coords="100,1,111,11" href="shop_content.php?coID=7" />
        <area shape="rect" coords="45,3,63,10" href="shop_content.php?coID=8" />
        </map>
  </div>
</div>

Css стили.

/*- Меню-закладки сверху */

#menu {background:#66a3c2;margin:0;height:35px;border-top:solid 1px #FFF;}
#menu ul {list-style: none; margin:3px 0px 0px 25px; padding: 5px 0 0px; text-align: center;float:left;}  
#navigation ul li {list-style: none;margin: 0;padding: 0;float:left;}
#menu ul li {display: inline;margin:0; border-right: solid 2px #ff5c08;padding:0 8px;}
#menu ul li.last {margin-right: 0; border:none;}
#menu ul li a {color: #fff;padding: 3px 3px;font-weight: bold;text-decoration: none;}
#menu ul li a:hover {color: #ff5c08;
		background: #dddddd;
		text-decoration: none;}
#menu ul li.current a {color: #fff;padding: 3px 3px;font-weight: bold;text-decoration: none;}
#menu ul li.current a:hover {color: #ff5c08;
		background: #dddddd
		text-decoration: none;}
/*\*//*/
#menu ul li a {display: inline-block;white-space: nowrap;width: 1px;}
#menu ul {padding-bottom: 0;margin-bottom: -1px;}
/**/
/*\*/
* html #menu ul li a {padding: 0;}
/**/
/*- /Меню-закладки сверху */
.headsl {height:35px; float:left; background:#dddddd; width:210px;}
.headsr {height:25px;float:right;background:#dddddd; width:210px; padding:10px 0px 0px 0px; }

Edited July 8, 2011 by Olekh

[igon]

#menu ul li {float:left; margin:0; border-right: solid 2px #ff5c08;padding:0 8px;}

[Olekh]

#menu ul li {float:left; margin:0; border-right: solid 2px #ff5c08;padding:0 8px;}

Не срабатывает, я уже что-то похожее делал. Смещается вниз <div class="headsr">.

http://savepic.org/1947442.png

Edited July 10, 2011 by Olekh

[jumancy]

без ссылки сложно точно сказать...но что можно сделать? нет ширины списка. попробуй написать ширину. потом #menu ul li {display:inline мне не нравится. Надо хотя бы писать inline-block или просто block вместе float:left

[Olekh]

без ссылки сложно точно сказать...но что можно сделать? нет ширины списка. попробуй написать ширину. потом #menu ul li {display:inline мне не нравится. Надо хотя бы писать inline-block или просто block вместе float:left

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