Картинка-маркер в списке сдвигает ссылки меню на следующую строку

Статус
Закрыто для дальнейших ответов.
byzantiner

byzantiner

Active Member
Регистрация
11.08.2010
Сообщения
29
В IE и Mozilla картинка-маркер в списке сдвигает ссылки меню на следующую строку.

Подскажите, пожалуйста, почему в IE и Mozilla ссылки меню уходят вниз на следующую строку, а не стоят на одной с картинкой установленной в li (list-style-image)?
В Opere тоже наблюдается смещение.
Нормально показывает Chrome и Safari.

http://my-homepage.gmxhome.de/Momente.html

Код: 
<div class="Menu">
<h1 class="corpus">MENU</h1>
<ul id="menu-list">
<li>
<a class="menu-hpt-akt" href="">Über mich</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Behandlungen</a>
</li>

  <ul class="menu-2">
  <li>
  <a class="menu-hpt-ina" href="">Gesichtspflege</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Beauty & Wellness</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Wimpern</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Schminken</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Maniküre</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Pediküre</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Sugaring</a>
  </li>
  </ul>

<li>
<a class="menu-hpt-ina" href="">Produkte</a>
</li>

  <ul class="menu-2">
  <li>
  <a class="menu-hpt-ina" href="">C N C</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">Hildegard</a>
  </li>
  <li>
  <a class="menu-hpt-ina" href="">S........</a>
  </li>
  </ul>

<li>
<a class="menu-hpt-ina" href="">Galerie</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Anfahrt</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Kontakt</a>
</li>
</ul>
</div>
Код: 
.menu-2 {
    padding: 0px 0px 0px 20px;
    margin: 0px;
    width: 140px;}

.menu-2 li {
    padding: 0px 0px 0px 20px;
    margin: 0px;
    width: 140px;
    text-align: left;
    list-style-position: inside;
    list-style-image: url(images/li.png);}

.menu-2 a {
    background-position: top left;
    display: block;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    width: 140px;
    height: 26px;
    line-height: 26px;}
Внёс некоторые изменения, но неправильное отображение осталось.

Код: 
<div class="Menu">
<h1 class="corpus">MENU</h1>
<ul id="menu-list">
<li>
<a class="menu-hpt-akt" href="">Ьber mich</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Behandlungen</a>
</li>
 
  <ul class="menu-2">
  <li>
  <a class="menu-2-ina" href="">Gesichtspflege</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Beauty und Wellness</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Wimpern</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Schminken</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Manikьre</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Pedikьre</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Sugaring</a>
  </li>
  </ul>
 
<li>
<a class="menu-hpt-ina" href="">Produkte</a>
</li>
 
  <ul class="menu-2">
  <li>
  <a class="menu-2-ina" href="">C N C</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">Hildegard</a>
  </li>
  <li>
  <a class="menu-2-ina" href="">S........</a>
  </li>
  </ul>
 
<li>
<a class="menu-hpt-ina" href="">Galerie</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Anfahrt</a>
</li>
<li>
<a class="menu-hpt-ina" href="">Kontakt</a>
</li>
</ul>
</div>
Код: 
div.Menu {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 160px;
        margin: 0px;
        padding: 0px;
        text-align: left;}
 
#menu-list {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    width: 160px;
    list-style-type: none;}
 
#menu-list li {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    width: 160px;
    list-style-type: none;
    text-align: left;}
 
#menu-list a {
    background-position: top left;
    display: block;
    padding: 0px 0px 0px 10px;
    margin: 0px;
    width: 160px;
    line-height: 26px;
    height: 26px;
    overflow: hidden;}
 
#menu-list a.menu-hpt-akt {
  background: url(images/menu-hpt-dk.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: red;
  text-shadow: #000 0.1em 0.1em 0.2em;}
 
#menu-list a.menu-hpt-ina {
  background: url(images/menu-hpt-hl.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: #000 0.1em 0.1em 0.2em;}
 
#menu-list a.menu-hpt-ina:hover {
  background: url(images/menu-bg-hover.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: red;
  text-shadow: #000 0.1em 0.1em 0.2em;}
 
/* --------------------  Menu - 2  --------------------- */
 
.menu-2 {
    padding: 0px 0px 0px 10px;
    margin: 0px;
    width: 140px;}
 
.menu-2 li {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    width: 140px;
    text-align: left;
    list-style-position: inside;
    list-style-image: url(images/li.png);}
 
.menu-2 a {
    background-position: top left;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    width: 140px;
    height: 26px;
    line-height: 26px;}
 
.menu-2 a.menu-2-akt {
  background: url(images/menu-hpt-dk.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: red;
  text-shadow: #000 0.1em 0.1em 0.2em;}
 
.menu-2 a.menu-2-ina {
  background: url(images/menu-hpt-hl.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  color: #ffffff;}
 
.menu-2 a.menu-2-ina:hover {
  background: url(images/menu-bg-hover.png) no-repeat;
  font-family: Georgia;
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  color: red;
  text-shadow: #000 0.1em 0.1em 0.2em;}
 
tigra60

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Сначала исправьте вложенные списки. Вложенный список должен быть внутри элемента LI, то есть перед закрывающим тегом </li>, а не после него:
Код: 
Неправильно:
<ul>
  <li> ... </li>
  <ul>
    <li> ... </li>
    <li> ... </li>
  </ul>
  <li> ... </li>
</ul>

Правильно:
<ul>
  <li> ... 
  <ul>
    <li> ... </li>
    <li> ... </li>
  </ul>
  </li>
  <li> ... </li>
</ul>
Возможно, в этом проблема.
 
tigra60

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Вообще то, правило list-style применяется ко всему списку (элемент UL), а не к строкам списка (LI).
Попробуйте исправить CSS:
Код: 
.menu-2 {
    padding: 0px 0px 0px 20px;
    margin: 0px;
    width: 140px;
/* эти две стоки перенесены из .menu-2 li */
    list-style-position: inside;
    list-style-image: url(images/li.png);
}

.menu-2 li {
    padding: 0px 0px 0px 20px;
    margin: 0px;
    width: 140px;
    text-align: left;
/* эти две строки нужно убрать: 
    list-style-position: inside;
    list-style-image: url(images/li.png); */
}
 
tigra60

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Полдня убил, и меня ужаснуло поведение такого маркера в самом-самом простом и безошибочном коде.
Просто список, без всяких стилей. Только напишешь ему list-style-position: inside; и list-style-image: url(images/li.png); и сразу получается полная задница.
Если никто не подскажет решения, придется отказаться от маркера или просто перед текстом каждого пункта вставлять картинку, примерно так:
Код: 
<ul class="menu-2">
  <li><img src="images/li.png" alt="*">
  <a class="menu-2-ina" href="">Gesichtspflege</a>
  </li>
  <li><img src="images/li.png" alt="*">
  <a class="menu-2-ina" href="">Beauty und Wellness</a>
  </li>
...
 
Serg@NT

Serg@NT

Well-Known Member
Регистрация
20.02.2010
Сообщения
506
Вот, попробуйте:
Код: 
.menu-2 li {

    padding: 0px 0px 0px 0px;

    margin: 0px;

    width: 140px;

    background: url('images/li.png') no-repeat scroll center left;
    text-align: left;
}
А вообще проблема в задании для ссылки в списке display: block;
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
0
Гости онлайн
75
Всего посетителей
75
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 932
Сообщения
64 048
Пользователи
12 694
Новый пользователь
Digital Caramel

Новые пользователи

Поделиться этой страницей

Верх Низ