Проблема с боковым меню

[альберt]

не понимаю что происходит с менюшкой (сбоку), ставлю значение height:100%, добавляю ссылки-кнопки и происходит что-то не понятное, появляется вертикальная полоса прокрутки.....

html

	
		   <div class="menu">
		<h2><a href="#" class="kn1"></a></h2>
		<h2><a href="#" class="kn2"></a></h2>
		<h2><a href="#" class="kn3"></a></h2>
	</div>
	<div class="content">
	</div>

css

* {
	margin:0 auto;
	padding:0;
	height:100%;
}

body {
	height:100%;
	width:780px;
	border: solid 1px black;
}

.menu {
	width:150px;
	border:solid 1px black;
	background-color:black;
	float:left;
	height:100%;
}

.content {
	width:auto;
	border:solid 1px red;
	background-color:#0066CC;
}

.kn1, .kn2, .kn3 {
	position:relative;
	height:19px;
	width:125px;
	display:block;
}

.kn1 {
	background-image:url(img/kn1.gif);
	margin-top:220px;
}

.kn2 {
	background-image:url(img/kn2.gif);
}

.kn3 {
	background-image:url(img/kn3.gif);
}

.kn2, .kn3 {
	margin-top:-600px;
}

Cсылка в интернете

[Great Rash]

Дело в том, что у вас к высоте менюшки добавляется 2 пикселя (бордер снизу и сверху). Уберите бордер и все будет ок.

[альберt]

хм, тут не в 2 пикселях дело.... Ты по ссылке "проходил"?)

Там получается большой отступ между тегами <h2>, а если его выравнять margin-top'ом то внизу остается много пустого места....

[mishka]

Дело в том что это у тебя не с менюшкой происходит, а со всей версткой вообще...

Это не верстка это.... ужас

Тут более коректно - "научите верстать"

Edited August 25, 2009 by mishka2

[Great Rash]

По ссылке не ходил. Но вот посмотрел повнимательней на код:

* {
	margin:0 auto;
	padding:0;
	height:100%;
}

Нафига margin: 0 auto;? Вы уж определитесь обнуляем стили или нет.

height: 100%; это что же получается, у вас у всех элементов будет стопроцентная высота?

Чую ничего непонятного тут не происходит...

[Searcher]

мда. я из этого кода даже не понимаю, что вы хотите...

[rus]

как сказал уже Great Rash у вас получается что для всех тегов на странице вы даете общий стиль ставя звездочку *, это означает что:

* {
	margin:0 auto;
	padding:0;
	height:100%;
}

этот стиль будет действовать на все элементы которые находятся на странице.