скачущее меню

[pupil]

http://sitegit.p.ht/in.html

на странице имеется меню с подпунктами (sfdsf), которое в разных браузерах отображается по-разному(начиная от положения, а заканчивая расстоянием между строками). подскажите, пожалуйста, как его зафиксировать. спасибо.

   <div class="myfloat">
    <div class="menu">
	 <ul>
	  <li><a href="#">sfdsf</a></li>
	  <li><a href="#">sfdsf</a></li>
	  <li><a href="#">sfdsf</a></li>
	  <li><a href="#">sfdsf</a></li>
	  <li><a href="#">sfdsf</a></li>
	 </ul>
    </div> <!-- menu -->
   </div> <!-- myfloat -->

.myfloat {
float:left;
}
ul {
list-style-image: url(image/liststyle.jpg);
}
.menu {
height: 195px;
width: 171px;
}
.menu a {
text-decoration: none;
font-family: arial;
color: #636038;
font-size: 12px;
font-weight: bold;
border-bottom-style: dotted;
}
.menu a:hover {
color: #aba774;
}

[Galaxy]

а вы сброс стилей используете?

[antonKar]

а вы сброс стилей используете?

Плюс line-height задавать надо.

[tilipaka]

Вот проблема.

Все браузеры отображают так:

Эксплорэр так:

Если удалить из кода Главная и Контакты и под ними текст, эксплорэр выдаст так:

В то время как все браузеры отображают как и было (ну только без Главной и Контактов).

Код такой

<table class="karkas">
<tr>
<td class="pic1"></td>
<td class="pic2"></td>
<td class="pic3"></td>
<td class="pic4"></td>
</tr>
<tr>
<td class="gmenu-podval" colspan="4">
</td>
</tr>
<tr>
<td colspan=3 rowspan="2" class="content">
</td>
<td class="smenu">Главная здесь</td>
</tr>
<tr>
<td class="vmenu">
</td>
</tr>
<tr>
<td colspan=4 class="gmenu-podval"></td>
</tr>
</table>

CSS

table.karkas {
margin: auto;
border: 1px solid black;
border-collapse: collapse;
width: 900px;
}
td.pic1 {
width: 200px;
height: 125px;
background: url(img/1.jpg);
}
td.pic2 {
width: 250px;
height: 125px;
background: url(img/2.jpg);
}
td.pic3 {
width: 251px;
height: 125px;
background: url(img/3.jpg);
}
td.pic4 {
width: 196px;
height: 125px;
background: url(img/4.jpg);
}
td.gmenu-podval {
height: 37px;
background: url(img/5.jpg);
border: 1px solid black;
padding-left: 20px;
}
td.content {
vertical-align: top;
background-color: #ffffff;
border: 1px solid black;
padding: 20px;
}
td.smenu {
width: 196px;
height: 37px;
background: url(img/smenu/menu.jpg);
text-align: center;
border: 1px solid black;
}
td.vmenu {
text-align: justify;
vertical-align: top;
background-color: #ffffff;
border: 1px solid black;
padding: 5px;
}

Когда начинаешь что-нибдь писать в левой ячейке

<td colspan=3 rowspan="2" class="content">ЗДЕСЬ
</td>

она естественно растягивается вниз и эксплорер растягивает "Меню"

Edited August 1, 2013 by tilipaka