Некорректное меню в IE6

[rijy]

Здравствуйте уважаемые форумчане.

Появилась надобность сделать раздвигающееся меню с использованием чистого CSS без всяких скриптов.. Воспользовался примером вот отсюда:

_trifler.ru/blog/post_1200597092.html

Как всегда вылазят бока в любимом ИЕ6=\

Вобщем в лисе все отображается отлично. Вот так меню выглядит в изначальном состоянии:

Вот так при наведении мыши:

В долбаном же ИЕ6 обнаружились какие-то левые отступы:

Изначальное состояние:

При наведении мыши:

Путем экспериментов определил следующее.. в файле стилей есть вот такой параметр:

* {margin:0;padding:0;}

Если его удалить, то в лисе появляется такой же отступ. Я так понял, этот параметр не принимается ИЕ6? Так ли это, и если так, то как это исправить?

Или дело в другом?

Буду очень благодарен за толковые советы..

Edited January 13, 2009 by rijy

[s0rr0w]

Буду очень благодарен за толковые советы..

Толковый совет номер 1.

В связи с новогодними отпусками штатных телепатов, нужно выкладывать код своего творения, а не картинки с конечным результатом.

[rijy]

Толковый совет номер 1.

В связи с новогодними отпусками штатных телепатов, нужно выкладывать код своего творения, а не картинки с конечным результатом.

творение не мое. я привел ссылку на блог в первом посте, там весь код представлен в чистом виде.

если это изменит ситуацию, привожу куски кода где я интегрировал это меню в общий шаблон:

В файле стилей:

[b]тут остальные стили шаблона
—
—-
—[/b]

* {margin:0;padding:0;}   
#nav {border:#fff 1px solid;margin:0px auto;width:175px;}
#nav a {
  color:#565656;
  display:block;
  font:12px/1.18 georgia,arial,helvetica,serif;
  margin:0;
  padding:3px 3px 3px 10px;
  position:relative;
  text-decoration:none;
}
#nav a:hover {color:#c50;}
#nav li {
  cursor:pointer;
  font:bold 12px/1.18 georgia,arial,helvetica,serif;
  list-style-type:none;
  padding:4px 0 2px;
}
#nav li span {padding:0 3px 0 6px;}
#nav li ul {border:#eee 3px solid;display:none;}
#nav li li {cursor:pointer;margin:1px;padding:1px;}
#nav li:hover {background-color:#eee;color:#905;}
#nav li:hover ul {background-color:#fff;display:block;}
#nav li:hover ul {#margin:0;#padding:1px;}
#nav li li {#margin:0;}
*html #nav li{behavior:url(../css/navigation.htc);zoom:1;}
*html #nav li.navigation ul {background-color:#fff;display:block;padding:1px;}
*html #nav li.navigation {background-color:#eee;color:#905;}

И в хтмле:

<table width="185" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="185" align="left" valign="top">
							<table width="183" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td align="center" height="38" background="{THEME}/images/nav_bg.gif"><div style="padding-bottom:10px; padding-left:30px; font-size:11px; font-weight:bold; color:#3a9dc4">Каталог</div>
									</td>
								</tr>
								<tr>
									<td align="right" valign="top"  >
										<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right:1px solid #d5e3f3;">
											<tr>
												<td width="1" background="{THEME}/images/border_left.gif">
												</td>
												<td width="" align="" valign="top" class="copy">



															<ul id="nav">
  <li><span>Игровые комплексы</span>
	<ul>
	  <li><a href="#">Спортивно-игровой комплекс К-01 (4 башни)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-02</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-03 (3 башни)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-04 (3 башни)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-05 (2 башни)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-06 (2 башни)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-07 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-08 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-09 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-10 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-11 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-12 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-13 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-14 (1 башня)</a></li>
	  <li><a href="#">Спортивно-игровой комплекс К-15</a></li>
	  <li><a href="#">Паровоз с одним вагончиком КП-01</a></li>
	  <li><a href="#">Машина КМ-01</a></li>
	  </ul></li>
  <li><span>Добавьте</span>
	<ul>
	  <li><a href="#">Все, что угодно</a></li>
	  <li><a href="#">Меню раздвигается</a></li>
	  <li><a href="#">Экономте место</a></li>

	  <li><a href="#">Под рекламу :)</a></li></ul></li>
  <li><span>Свои Ссылки</span>
	<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></ul></li>
</ul>  





												</td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td align="left" valign="top"><img src="{THEME}/images/block_footer.gif" width="183" height="26" /> </td>
								</tr>
							</table>

[s0rr0w]

творение не мое. я привел ссылку на блог в первом посте, там весь код представлен в чистом виде.

Что-то у тебя не то с остальным кодом. Данный кусок показывает почти одинаковый результат.

Если убрать еще у TD align="right", то будет все еще лучше.

[rijy]

Очень жаль Прийдется отказаться от этого меню.. Хотя его функционал очень понравился..

Нашел примерно похожее свиду (раскрывающееся не при наведении мыши, а при нажатии):

<a title="Самый главный пункт" href="java script:ShowOrHide('menu1');">Самый главный пункт</a>
					<div id="menu1" style="display:none;">
						<ul>
							<li><a href="/">Выпадающий пункт 1</a></li>
							<li><a href="/">Выпадающий пункт 2</a></li>
							<li><a href="/">Выпадающий пункт 3</a></li>
							<li><a href="/">Выпадающий пункт 4</a></li>
							<li><a href="/">Выпадающий пункт 5</a></li>
						</ul>
					</div>

Единственная проблема - оно не работает при отключенных сценариях. Можно ли как то сделать, чтобы вот эта ссылка:

<a title="Самый главный пункт" href="java script:ShowOrHide('menu1');">Самый главный пункт</a>

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

Edited January 13, 2009 by rijy

[s0rr0w]

Очень жаль Прийдется отказаться от этого меню.. Хотя его функционал очень понравился..

Зачем отказываться? Нужно смотреть данный кусок кода в странице, а не отдельно от нее.

[rijy]

Буду очень благодарен, если взглянете на код и сможете дать рекомендации.

Не нашел опции вложения файлов, залил на обменник.

Тут main.tpl (главный шаблон сайта):

http://www.rapidshare.ru/887747

Тут style.css:

http://www.rapidshare.ru/887750

Спасибо

[s0rr0w]

#nav {border:#fff 1px solid;margin:0px;width:175px;}