Элемент padding в FireFox3

[Gmans]

Добрый день!

Всех с последним днём зимы!

Вот тут возникла кракозябра, парился всю ночь, но ничего не вышло, суть такова:

Пишу шаблон для 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;

то всё нормально в файрфоксе, но в других с точностью наоборот

Собственно скриншот:

[banyman]

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

Edited February 28, 2009 by banyman

[Gmans]

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

А как это делается 0_о Гугл не рулит

[Gmans]

Разобрался сам, всем спасибо