CSS Layout, Fehler bei Navigationsbuttons

[MichiZH]

Hi

Vielleicht kapiere ich das Boxmodell nicht oder es liegt nur an Safari, aber ich seh den FEhler nicht. Wenn ein div 1 ein div 2 umschliesst, dann muss ja das div 1 die Höhe des div 2 + das padding + den rahmen etc. des div 2 haben oder?

Also ich habe folgende Navigation:

#navigation {
    width: 100%;
    background-color: #FFB300;
    border-width: 0 0 1px 0;
    border-color: #0D1D62;
    border-style: solid;
    font-weight: bold;
    height: 20px;
}

#navigation a {
	text-decoration: none;
	font-weight: bold;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-color: #0D1D62;
	background-color: #FFB300;
	color: #0D1D62;
	padding: 2px 4px;
	height: 100%
	vertical-align: middle;
	margin: 0 10px 0 0;
}

#navigation a:hover {
	background-color: #FFF0CC;
}

Das ganze sieht dann in der html datei so aus:

<div id="navigation">
       <a href="#">Home</a><a href="#">Text</a>
    </div>

Allerdings ragt der Rahmen der a's über das div navigation heraus und unten fehlt 1px, es hat also eine Lücke. Wo ist mein Fehler?

[Adromir]

Vieleicht liegt es daran, daß du dem #naviagtion eine feste Höhe von 20px zugewiesen hast.