Форум Сайтостроение Веб-строительство

Баг верстки в IE6. Нужна помочь...

iguania
На сайте с 10.12.2010
Offline
72
iguania
628

Добрый день, уважаемые форумчане!

Не могу разобраться с багом верстки в IE6, но очень нужно. Прошу от вас помощи. Собственно, есть такая вот менюшка 

<div id="menu_left">

	<a href="/link1">Text1</a>

	<a href="/link2">Text2</a>

	<a href="/link3">Text3</a>

	<a href="/link4">Text4</a>

	<a href="/link5">Text5</a>

	<a href="/link6">Text6</a>

	<a href="/link7">Text7</a>

	<a href="/link8">Text8</a>

</div>

И вот стили к этому меню 

#menu_left{

	padding: 12px 0px 15px;

	margin-top: 30px;

	background: url('/menu_left_bg.png') no-repeat top center;

}



#menu_left a{

	text-align: left;

	font-size: 16px;

	text-decoration: none;

	color: #067192;

	display: block;

	height: 23px;

	padding: 5px 0 0 19px;

	margin: 1px 3px 2px;

}



#menu_left a:hover{

	text-decoration: underline;

	background: url('/menu_left_a_hover.png') no-repeat right center;

}

Так вот во всех браузерах эта менюшка отображается корректно при наведении указателя на пункт меню, а в IE6 пункты меню смещаются взад-вперед, "ходят волнами" (я так понимаю, что добавляется при наведении какой-то отступ.

Буда рад любой помощи. Всем ответившим спасибо!

Все всегда заканчивается хорошо. Если все закончилось плохо, значит, это еще не конец…
DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#1 


* {

	outline:none;

}



:hover, :focus, :active {

	outline:none;

}

пробуйте...

show must go on !!!...
Петр Елагин
На сайте с 21.03.2007
Offline
197
Петр Елагин
#2
iguania:
Добрый день, уважаемые форумчане!

Не могу разобраться с багом верстки в IE6, но очень нужно. Прошу от вас помощи. Собственно, есть такая вот менюшка 

<div id="menu_left">

	<a href="/link1">Text1</a>

	<a href="/link2">Text2</a>

	<a href="/link3">Text3</a>

	<a href="/link4">Text4</a>

	<a href="/link5">Text5</a>

	<a href="/link6">Text6</a>

	<a href="/link7">Text7</a>

	<a href="/link8">Text8</a>

</div>


И вот стили к этому меню 

#menu_left{

	padding: 12px 0px 15px;

	margin-top: 30px;

	background: url('/menu_left_bg.png') no-repeat top center;

}



#menu_left a{

	text-align: left;

	font-size: 16px;

	text-decoration: none;

	color: #067192;

	display: block;

	height: 23px;

	padding: 5px 0 0 19px;

	margin: 1px 3px 2px;

}



#menu_left a:hover{

	text-decoration: underline;

	background: url('/menu_left_a_hover.png') no-repeat right center;

}


Так вот во всех браузерах эта менюшка отображается корректно при наведении указателя на пункт меню, а в IE6 пункты меню смещаются взад-вперед, "ходят волнами" (я так понимаю, что добавляется при наведении какой-то отступ.

Буда рад любой помощи. Всем ответившим спасибо!

ие 6 это 2 процента пользоателей. официально ие 6 не поддерживается - это для заказчика. а не для заказчика, я верстальшику сказал. говорит отпишет.

https://shareways.ru
P
На сайте с 28.04.2011
Offline
1
psishock
#3

проще всего, профиксить это персонально для IE6, можно заменой 


#menu_left a{ 

   ...

  height: 23px; 

  ...

}

на 


#menu_left a{ 

   ...

  line-height: 23px; 

  ...

}

ну и немного откорректировать значения маргинов и паддингов (всё в отдельном ослостиле)

dma84
На сайте с 21.04.2009
Offline
168
dma84
#4
AlienZzzz:
ие 6 это 2 процента пользоателей. официально ие 6 не поддерживается - это для заказчика. а не для заказчика, я верстальшику сказал. говорит отпишет.

Очень познавательно, не замечаете? Если человеку надо - значит надо.

DiAksID:

* {
	outline:none;
}

:hover, :focus, :active {
	outline:none;
}


пробуйте...

В IE6? Честно (искренне), не знал что 6-й осёл такое воспринимает

psishock:
проще всего, профиксить это персонально для IE6, можно заменой

#menu_left a{ 
   ...
  height: 23px; 
  ...
}

на

#menu_left a{ 
   ...
  line-height: 23px; 
  ...
}

ну и немного откорректировать значения маргинов и паддингов (всё в отдельном ослостиле)

Вот тут согласен, 6-ой осёл не воспринимает display:block для неблочных элементов без явного указания ширины или высоты, но при чём тут смещения пунктов без изменения размера шрифта и его "жирности"? Хоть и верстаю под осла 6-го часто, но сейчас сказать по сабжу ничего не могу, извиняйте, ДР на носу

А вообще нужно зрить в код CSS

Google готовит к запуску Как сделать сайт удобным Core Web Vitals: новый
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#5

А не проще списком, это же меню у вас?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
#menu_left{
    list-style:none;
    padding: 12px 0px 15px;
    margin-top: 30px;
    background: url('/menu_left_bg.png') no-repeat top center;
}

#menu_left li a{
    font-size: 16px;
    text-decoration: none;
    color: #067192;
    height: 23px;
    line-height:28px;
    padding: 0 0 0 19px;
    margin: 1px 3px 2px;
}

#menu_left li a:hover{
    text-decoration: underline;
    background: url('/menu_left_a_hover.png') no-repeat right center;
}
</style>
  </head>
  <body>
<ul id="menu_left">
<li><a href="/link1">Text1</a></li>
<li><a href="/link2">Text2</a></li>
<li><a href="/link3">Text3</a></li>
<li><a href="/link4">Text4</a></li>
<li><a href="/link5">Text5</a></li>
<li><a href="/link6">Text6</a></li>
<li><a href="/link7">Text7</a></li>
<li><a href="/link8">Text8</a></li>
</ul
  </body>
</html>
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#6

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

IE6 пользуются огромное кол-во пользователей не смотря на то, что это составляет почти 3%

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
Как правильно - ссылка Подскажите по верстке в съежается таблица
[Удален]
#7

Я бы вот так сделал:


ul, li{margin: 0px; padding: 0px; list-style-type: none;}

#menu_left{
padding: 12px 0px 15px;
margin-top: 30px;
background: url('/menu_left_bg.png') no-repeat top center;
}

#menu_left a{
text-align: left;
font-size: 16px;
text-decoration: none;
color: #067192;
height: 23px;
padding: 5px 0 0 19px;
margin: 1px 3px 2px;
}

#menu_left a:hover{
text-decoration: underline;
background: url('/menu_left_a_hover.png') no-repeat right center;
}

<div id="menu_left">
<ul>
<li><a href="/link1">Text1</a></li>
<li><a href="/link2">Text2</a></li>
<li><a href="/link3">Text3</a></li>
<li><a href="/link4">Text4</a></li>
<li><a href="/link5">Text5</a></li>
<li><a href="/link6">Text6</a></li>
<li><a href="/link7">Text7</a></li>
<li><a href="/link8">Text8</a></li>
</ul>
</div>

И ничего не прыгает нигде.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий