Probleme mit padding bzw. margin

[Sanjoy]

Hallo liebe Helfer,

ich habe innerhalb eines div-Elements eine Aufzählungsliste. Nicht wundern, diese enthält erst ein Element, aber ich bin schon auf das erste Problem gestoßen - was mache ich falsch?!

Zunächst der Code - CSS:
div#menu {
height:60px;
background:url(../images/menu_symbols_bg.png) repeat-x;
}

.menu_symbols {list-style:none; padding:0; margin:3px; height:50px; background:transparent;}
.menu_symbols li a {display:block; text-decoration:none; position:relative;}
.menu_symbols li a img {width:58px; height:50px}

HTML:
...
 <div id="menu">
  <ul class="menu_symbols">
   <li><a href="link"><img src="images/menu_symbols_back.png" alt="zur&uuml;ck"></a></li>
  </ul>
 </div>
...

Irgendwo muss ich nen dicken Denk- oder Syntaxfehler haben - finde ihn nur grad leider nicht!
Ich möchte, dass menu_symbols nicht ganz am oberen Rand des div-Elements klebt (deswegen margin:3px;), allerdings wird dann das Hintergrundbild vom div-Element nicht mehr richtig angezeigt (weißer Rand/verschoben). Wenn ich im div-Element zusätzlich noch border:1px solid #000; angebe, funktioniert es. Mit padding-top im div Elements gehts garnicht. Was mache ich denn nun schon wieder falsch - arg?!

Vielen Dank und liebe Grüße
Sanjoy