зачем тут нужна явная высота

[kukumumu]

в общем, такой вот код html

	<div class="header">
		<div class="logo"><img src="images/logo.png" title="Школа водительского мастерства" alt="Школа водительского мастерства drive-style" /></div>
		<div class="epigraf">
			<table border="0" cellpadding="0" cellspacing="0" width="99%">
			<tr>
				<td class="slogan"><span class="blue">БОЛЬШЕ ПРАКТИКИ - </span><span class="red">МЕНЬШЕ СТАТИКИ!</span></td>
				<td class="mission">     Дух независимости и предчувствие приключений - лучшие лекарства от серых будней. Сердце бьется в унисон шума колес, тело и авто - единый механизм. Свободный, как ветер, странник мчится навстречу неведомым городам, людям и ощущениям. Он сам создает свою мечту и сам назначает время ее исполнения. Такова магия дороги - ее сила, крас	ота и драйв!</td>
			</tr>
			</table>
			<div class="topmenu">
				<ul>
					<li><a href="#">Новости</a></li>
					<li><a href="#">Специальные предложения</a></li>
					<li><a href="#">Скидочные карты</a></li>
					<li><a href="#">Сезонное предложение</a></li>
				</ul>
			</div>
		</div>	
	</div>
	<div class="menu">
		<ul>
			<li><a href="#">НАША ШКОЛА</a></li>
			<li><a href="#">УЧЕБНАЯ ПРОГРАММА</a></li>
			<li><a href="#">ТРЕНЕРЫ</a></li>
			<li><a href="#">КОРПОРАТИВНЫМ КЛИЕНТАМ</a></li>
			<li><a href="#">ФОТО</a></li>
			<li><a href="#">ВИДЕО</a></li>
			<li><a href="#">СТОИМОСТЬ</a></li>
			<li><a href="#">КОНТАКТЫ</a></li>
		</ul>
	</div>

и такие вот стили:

.header	{

height:122px;
}

.logo	{

width:345px;
height:122px;
float:left;
}
.epigraf
{
width:647px;
background:url(images/header.png) no-repeat;
float:right;
height:122px;



}
.slogan	{
vertical-align:middle;
font-size:11px;
font-weight:bold;
width:252px;
height:92px;
}
.mission	{
color:#FFFFFF;
font-size:10px;
text-align:justify;
}
.red {
color:#e6042c;
}
.blue	{
color:#224eb7;
}
.topmenu	{
position:relative;
top:0px;
left:-23px;
height:30px;
background:url(images/topmenu.png);
width:670px;
}
.topmenu ul	{
list-style-type:none;
margin:0;
display:block;
font-size:10px;
font-weight:900;
padding:0px 10px;
}
.topmenu li	{
display:inline;
margin:0 4px;

}
.topmenu li a{
display:block;
float:left;
margin:0 4px;
text-decoration : none;
color:#000000;

padding:10px 4px;
}
.topmenu li a:hover{
margin:0 5px;
}
.menu	{
height:36px;
background:#33FF00;
padding:0;

}
.menu ul	{
list-style-type:none;
margin:0;
display:block;
font-size:14px;
font-weight:bold;
padding:0px 20px;
}
.menu li	{
display:inline;
margin:0 4px;

}

.menu li a{
display:block;
float:left;
margin:0 4px;
text-decoration : none;
color:#000000;
background-color:#FF0066;

padding:10px 4px;
}
.menu li a:hover{

background:#b5b5b5;
margin-left:1px;
}
.main_content	{
background:url(images/trener.png);
width:992px;
height:625px;

}

а вопрос мой, почему, если я убираю у класса epigraf высоту, то часть элементов списка в диве класса menu, расположенная под epigraf, сдвигается вниз на 2px?более того, почему, если там ставить див со стилем clear:both между menu и header, то сдвигается весь див menu? картинки все по высоте равны высоте содержащих их дивов. я понимаю, что выглядит все ужасно. но все же..

спасибо.

[madhed]

хм... опробовала код - у меня ничего никуда не съезжает...

Но все же... Попробуйте между элементами menu и header поставить <div style="clear: both;"></div> или свойством css .class-name:after {clear: both;}

[kukumumu]

хм... опробовала код - у меня ничего никуда не съезжает...

Но все же... Попробуйте между элементами menu и header поставить <div style="clear: both;"></div> или свойством css .class-name:after {clear: both;}е

спасибо за проявленное внимание. а вы убирали у класса epigraf "height:122px;"? съезжает только в этом случае. а если поставить между элементами <div style="clear: both;"></div> - то тоже неприятности. все меню съезжает вниз на 2 пикселя.

а в седьмом эксплорере, вообще, даже если не убирать высоту - правая часть меню не отображается :-О

Edited December 21, 2012 by kukumumu

[icore]

Элементы съезжают потому что их вытесняют размеры div c классом epigraf, а конкретно вот этот padding .topmenu li a { padding: 10px 4px; }, поставьте padding: 10px 4px; и ничего съезжать не будет.

[kukumumu]

Элементы съезжают потому что их вытесняют размеры div c классом epigraf, а конкретно вот этот padding .topmenu li a { padding: 10px 4px; }, поставьте padding: 10px 4px; и ничего съезжать не будет.

спасибо. что-то я не поняла. где надо поставить этот паддинг? попробовала удалить паддинг вообще, все осталось по-прежнему, за исключением того, что пункты топменю поднялись наверх.

[icore]

.topmenu li a{
display:block;
float:left;
margin:0 4px;
text-decoration : none;
color:#000000;

padding:10px 4px;
}

Вот в этом padding нужно поменять на 8px. Это происходит потому что padding вытесняет элементы нижнего меню, а при установленном height, он просто уменьшает этот padding. Почитайте вот это.

[kukumumu]

.topmenu li a{
display:block;
float:left;
margin:0 4px;
text-decoration : none;
color:#000000;

padding:10px 4px;
}

Вот в этом padding нужно поменять на 8px. Это происходит потому что padding вытесняет элементы нижнего меню, а при установленном height, он просто уменьшает этот padding. Почитайте вот это.

спасибо, почитаю!

[kukumumu]

icore, вы знаете, попробовала я с паддингом поставить, как вы говорили - не получается. опять же все съезжает. (если убрать высоту у класса epigraf). не в паддинге класса topmenu тут дело. разберусь - напишу, в чем.

UPD разобралась. не у меню, а у телефона. в любом случае, дело было действительно в паддинге

Edited December 22, 2012 by kukumumu