Имам разминаване на CSS кода в Internet Explorer и Mozilla

[meix]

Когато си написах кода ( видях го от един урок ) и го нагодих за моите нужди имам разминаване в двата браузера, а кода не един

това е кода:

<html>
<head><title>Menu</title>
<style type="text/css">
.menu {
width:112px; /*задаваме широчина*/
height:62px; /*задаваме височина*/
padding:3px 32px; /*задаваме вътрешните отстъпи*/
color:#000; /*цвят на текста в нормално състояние*/
font-weight:bold; /*форматиране на текста,в случая текста ще бъде удебелен*/
font-family: Arial; /*форматиране на текста,в случая текста ще бъде удебелен*/
font-style: italic; /*форматиране на текста,в случая текста ще бъде удебелен*/
letter-spacing:1px; /*разстояние между буквите*/
background:#333 url('menu.jpg') 0 0px no-repeat; /*задаваме фон на бутона в нормано

състояние*/
border:1.5px solid #777; /*задаваме рамка на бутона*/
text-decoration:none; /* задаваме да няма подчертаване на линковете*/
}

.menu:hover {
color:#FFF58F; /*цвят на текста когато сме посочили бутона*/
background-position: 0 -32 px; /*посочваме стойностите откъде докъде да използва

картинката за фон*/
}

</style>
</head>

<body>
<a href="#" class="menu"><font face="Comic Sans MS">Link</font></a>
<a href="#" class="menu"><font face="Viner Hand ITC">Link</font></a>
<a href="#" class="menu">Link</a>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu"><font face="Viner Hand ITC">Link</font></a><br><br>
<a href="#" class="menu">Link</a>
</body></html>

В Internet Explorer ми дава :
http://meix.1gb.bg/HTML_CSS/pic1.JPG

В Mozilla ми дава:
http://meix.1gb.bg/HTML_CSS/pic2.JPG

защо, така се получава ?

 

[dashe]

Та като гледам кода нз..
Пробвай това но не съм сиг. дали щЪ си бачка...

<div id="menu">
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
</div>

edit:
Офф моя грешка.
Благодаря за edit-а на кода. :wink:

 

[t0m3kk]

Та като гледам кода нз..
Пробвай това но не съм сиг. дали щЪ си бачка...

<div id="menu">
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
</div>

трябва да е

<div class="menu">
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
<a href="#">Начало</a>
</div>

btw дай урока или поне картинката, за да видя дали ще ти го нагодя

 

[meix]

Пробвах и двата варианта, но не става.
Когато е <div id="menu"> не откривам разлика ,
а когато е <div class="menu"> ми ги дава в вертикален ред ( не е добър вида така, защото има наслояване на картинките ), а ефекта си е същия. Мерси все пак за предложенията