Добрый день! Всех с последним днём зимы! Вот тут возникла кракозябра, парился всю ночь, но ничего не вышло, суть такова: Пишу шаблон для SMF, и начал создавать меню. Суть идеи такова - при наведении на пункт меню задний план меняется. Реализовать решил в <ul> Вышло примерно так: <div id="main_menu"> <ul class="clearfix"> <li id="button_home" class="active"> <a title="home" href="http://localhost/rc1/index.php"> <span><em>Начало</em></span> </a> </li> <li id="button_help"> <a title="help" href="http://localhost/rc1/index.php?action=help"> <span>Помощь</span> </a> </li> <li id="button_search"> <a title="search" href="http://localhost/rc1/index.php?action=search"> <span>Поиск</span> </a> </li> <li id="button_admin"> <a title="admin" href="http://localhost/rc1/index.php?action=admin"> <span>Админ</span> </a> </li> <li id="button_moderate"> <a title="moderate" href="http://localhost/rc1/index.php?action=moderate"> <span>Модерация</span> </a> </li> <li id="button_profile"> <a title="profile" href="http://localhost/rc1/index.php?action=profile"> <span>Профиль</span> </a> </li> <li id="button_pm"> <a title="pm" href="http://localhost/rc1/index.php?action=pm"> <span>Личные сообщения</span> </a> </li> <li id="button_calendar"> <a title="calendar" href="http://localhost/rc1/index.php?action=calendar"> <span>Календарь</span> </a> </li> <li id="button_mlist"> <a title="mlist" href="http://localhost/rc1/index.php?action=mlist"> <span>Пользователи</span> </a> </li> <li id="button_logout" class="last"> <a title="logout" href="http://localhost/rc1/index.php?action=logout;f9fb7f5104=9ceadd8b0aa50285bf37a980372de079"> <span>Выйти</span> </a> </li> </ul> </div> Где: /* The main menu. */ #main_menu { background: url(../images/nav_bg.gif) repeat-x; margin: 0; padding: 0; } #main_menu ul { list-style: none; padding: 0; margin: 0; } #main_menu li { margin: 0; padding: 0; display: inline; } #main_menu li a { float: left; color: white; font-size: 11px; font-family: tahoma, sans-serif; text-transform: uppercase; } #main_menu li a:hover { color: #e0e0ff; text-decoration: none; } #main_menu li a span { background: url(../images/nav_link.gif) bottom left no-repeat; display: block; padding: 17px 10px 17px 10px; } #main_menu li.active a span em { margin: 0; padding:0; display: block; font-style: normal; } Собствено о замене изображений я знаю всё довольно неплохо(правда здесь пока не сделано), а я уперся в другой камень: Дело в том что, гугл хром, IE 7 - 8, opera 9.5 - отображают всё нормально, а вот firefox3 - отступает лишний пиксель. Если убрать этот лишний пиксель и сделать так: padding: 17px 10px 16px 10px; то всё нормально в файрфоксе, но в других с точностью наоборот Собственно скриншот: