kukumumu

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

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

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

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

в общем, такой вот код 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? картинки все по высоте равны высоте содержащих их дивов. я понимаю, что выглядит все ужасно. но все же.. спасибо.