CSS Problem | yourWBB

Infinity2k6

Moin,
bin gerade dabei was kleineres zu programmieren, jetzt steh ich jedoch vor nem Problem (s. Anhang 1) Wie krieg ichs hin dass der helle 1px Border der Navi nicht durch den Kasten geht, also dass der Buttonkasten praktisch die Leiste überlagert?

code:
1: 2: 3:	<div id="mainnavi"> <div id="buttons">Text</div> </div>

so siehts in der html Datei aus
mainnavi ist in dem falle die leiste, buttons der kasten ganz links.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

#mainnavi {
	margin: 0;
	padding: 0;
	background-color: #474747;
	border: 1px solid #606060;
}

#buttons {
	height: 40px;
	width: 60px;
	background-color: #606060;
	border-right: 1px solid black;
	v-align: middle;
}

#buttons:hover {
	height: 40px;
	width: 60px;
	background-color: #000000;
	border-right: 1px solid black;
	v-align: middle;

}

ich möchte im grunde dass es so aussieht wie im 2. angehängten Bild.

so sieht das ganze in der css-datei aus.
vllt. kann mir ja jemand bei meinem problem helfen, wäre dankbar Freude

Chopsticks

EDIT: Moment, hab was falsch gemacht.
------

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

#buttons {
	background: #606060;
	border-right: 1px solid #000;
	float: left;
	height: 42px;
	width: 63px;
}

.black {
	background: #000;
	height: 42px;
	padding: 1px;
}

#mainnavi {
	background: #474747;
	border: 1px solid #606060;
	height: 40px;
	margin-left: 1px;
}

code:
1: 2: 3: 4:	<div class="black"> <div id="buttons">Text</div> <div id="mainnavi"></div> </div>

Komischerweise zeigt Internet Explorer es so wie ich es mir vorgestellt habe. Firefox dennoch nicht. Da scheint etwas falsch zu sein (Umsetzung).

ayaz47

thanks you