кроссбраузерность css

[sleepnow]

Добрый день господа. CSS столкнуло сравнительно не давно. До этого nix.

Все вопросы обычно решает гугл, он же знает все) Но тут я слегка подзастрял.

Я написал простенький сайтик, в хедере которого находится пару кнопок.. которые при hover изменяют изображение ( aka костыли изменения картинки).

html:

                        <div id="link_main" onclick="location.href='./index.html';" style="cursor:pointer;"> </div>
			<div id="link_services" onclick="location.href='./services.html';" style="cursor:pointer;"> </div>
			<div id="link_price" onclick="location.href='./price.html';" style="cursor:pointer;"></div>
			<div id="link_contact" onclick="location.href='./contact.html';" style="cursor:pointer;"></div>

ссылка по диву через яву.

css:

#link_main 
{ 	 margin: 47%;
     top: -26px;
     position: absolute; 
	 width: 81px;
	 height: 56px;
	 background-image:url(images/link_main.png);
	 }
#link_main:hover
{ 	 margin: 46.3%;
	 top: -26px;
     position: absolute; 
	 width: 98px;
	 height: 56px;
	 background-image:url(images/main1.png);
}
#link_services 
{ 	 margin: 53.7%;
     top: -30px;
     position: absolute; 
	 width: 81px;
	 height: 56px;
	 background-image:url(images/link_services.png);
	 }
#link_services:hover
{ 	 margin: 53%;
     top: -30px;
     position: absolute; 
	 width: 99px;
	 height: 56px;
	 background-image:url(images/services1.png);
	 }
#link_price 
{ 	 margin: 59.5%;
     top: -33px;
     position: absolute; 
	 width: 96px;
	 height: 56px;
	 background-image:url(images/link_price.png);
	 }
#link_price:hover
{ 	 margin: 59.5%;
     top: -33px;
     position: absolute; 
	 width: 96px;
	 height: 56px;
	 background-image:url(images/price1.png);
	 }
#link_contact 
{ 	 margin: 66.2%;
     top: -37px;
     position: absolute; 
	 width: 96px;
	 height: 56px;
	 background-image:url(images/link_contact.png);
	 }
#link_contact:hover
{ 	 margin: 66.2%;
     top: -37px;
     position: absolute; 
	 width: 96px;
	 height: 56px;
	 background-image:url(images/contact1.png);
	 }

Пинайте меня за код

И наконец вопрос.. везде работает.. Chrome ( я в нем и работаю. удобный инструмент для "вебмастера" ), IE вроде тоже ок. А вот FF кнопки эти "уезжают" фиг пойми куда.

Вопрос.. почему? Делать сброс стилей до css?

p.s. поставил FF.. не смотря... что эти DIV'ы запилены в хедер - все равно кривит их) FF расчитывает совершенно абстрактные числа позиционирования. Если margin удалить, top 0, left: xx px; то все нормально.. но все же.. как сделать ПРАВИЛЬНО?

Спасибо!

Edited November 26, 2012 by sleepnow