div mit padding überlappt andere divs!

[RollingStones]

livedemo: Unbenanntes Dokument

der html-code für die navigation:

<div class="spacer"><!-- --></div>
<div class="menue"><a href="">Home</a><a href="">link2</a><a href="">link3</a></div>
<div class="spacer"><!-- --></div>

der css-code der roten kästchen:

.menue a {
margin:0;
padding:0.50em;
text-align:center;

color:#ffffff;
text-decoration:none;
background-color:#CC0000;
border:0;
}

ich habe ein padding von 0.50em bei den roten kästchen eingestellt, damit die schrift nicht direkt am rand ist!
gibt nur noch ein problem, wie auf der livedemo zu sehen ist:

das div "menue" überlappt jetzt einfach die beiden anderen divs "spacer" durch die paddingeinstellung!

das ist schon immer mein problem mit den divs..sobald ich einen paddingwert einstelle, überlappt dieses div die anderen divs!
das ist der vorteil von tabellen...welche sich NICHT einfach so überlappen! :(

wie kriege ich das geregelt?

 

[Tar]

Lass das padding weg und gib den Links margin-werte, oder du gibst eine Feste höhe an und ziehst 0.50em davon ab.

 

[RollingStones]

Hm....möglichkeit 1 funktioniert nicht bzw. es verändert sich gar nichts.

bei möglichkeit 2...wem eine feste höhe geben?

.menue oder .menue a?

wenn ich dem letzteren eine feste höhe gebe passiert gar nichts...beim ersten schon..allerdings bringt mir das ja nicht viel...

hier der aktuelle stand:

Unbenanntes Dokument

<div class="spacer"><!-- --></div>
<div class="menue"><a href="">Home</a><a href="">link2</a><a href="">link3</a></div>
<div class="spacer"><!-- --></div>

.menue {
text-align:left;
height:2em;


font-size:0.75em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;

background-color:#ffffff;
border:1px solid black;
}

.menue a {
margin:0;
padding:0;
text-align:center;

color:#ffffff;
text-decoration:none;
background-color:#CC0000;
border:0;
}

und jetzt?