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
Внёс некоторые изменения, но неправильное отображение осталось.
Подскажите, пожалуйста, почему в 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;}