Проблемы со списками в ие 6-7

alexander.parphenuyk · May 20, 2010

Делаю выпадающее меню такой стурктуры:

<ul class="dropdown">
   <li class="mn_firstlvl"><a class="dir" href="#">Контакт</a>
	  <ul>
		<li><a href="#">Одна длинна</a></li>
		<li><a href="#">Вторая очень большая длинна</a></li>
		<li><a href="#">Третья</a></li>
	  </ul>
   </li>
....
</ul>

.mn_firstlvl {
	display: block;
	float: left;
	background-image: url(images/graymenuline.gif);
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 32px;
}
ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 31px;
	left: 0;
	z-index: 598;
	width: auto;
	background-image: url(images/submenufon.png);
}
ul.dropdown ul li {
	float: none;
	display:inline;
	margin-left:0;
	margin-right:0;

}
*html ul.dropdown ul li:hover {
background-color:#c4cbd3;
}
ul.dropdown ul li a{
	color:#FFFFFF;
	font-size:11px;
	line-height:14px;
	white-space: nowrap;
	font-family:Tahoma;
	font-weight:bold;
	text-transform: none;
	padding:8px 16px;
	display:block;
}
*html ul.dropdown ul li a{
width:100%;
}
ul.dropdown ul li a:hover{
background-color:#c4cbd3;
}

и в ie 6-7 при наведении на выпадающий пункт меню.... ховерная смена фона срабатывает не на всю длинну а только на ширину текста и падднги =\

а надо так:

помогите кто может =\

psywalker · May 20, 2010

ul.dropdown ul li {

float: none;

display:inline; убрать!

margin-left:0;

margin-right:0;

}

alexander.parphenuyk · May 21, 2010

не помогло =(

Edited May 21, 2010 by alexander.parphenuyk

psywalker · May 21, 2010

попробуй zoom:1;

alexander.parphenuyk · May 21, 2010

=\ тож непомогает...

он строку <li> получается не растягивает на всю ширину <ul>

psywalker · May 21, 2010

У меня всё работает одинаково везде.

Давай ссылку.

alexander.parphenuyk · May 21, 2010

Скинул тебе в личку...

psywalker · May 21, 2010

Скинул тебе в личку...

Никаких личек. Делай отдельный кусок кода, именно проблемный, и выкладывай его сюда, делись проблемой, чтобы другие могли тоже посмотреть, подчеркнуть себе что нибудь из этого, поучиться.

alexander.parphenuyk · May 21, 2010

Не, проблемный кусок то я выложу.. просто реальный макет никаму показывать неохото....

суть проблемы я сюда выложу.... обещаю.... =) просто в другом внешнем оформлении...

psywalker · May 21, 2010

Не, проблемный кусок то я выложу.. просто реальный макет никаму показывать неохото....
суть проблемы я сюда выложу.... обещаю.... =) просто в другом внешнем оформлении...

Не вопрос.

alexander.parphenuyk · May 21, 2010

Пример выложен тут

для работы в ie6 подключаются два скрипта из папки /js

но проблемма наблюдается ещё и в ie7

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menusimple</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/dropdown_jquery.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
  <div class="mainmenu">
	<ul class="dropdown">
	  <li class="mn_firstlvl"><a href="#">aaaaaaa</a></li>
	  <li class="mn_firstlvl"><a class="dir" href="#">b bbbbbbbb</a>
	  <ul>
	  <li><a href="#">text_for_simple</a></li>
	  <li><a href="#">text</a></li>
	  <li><a href="#">text_here</a></li>
	  <li><a href="#">texte</a></li>
	  </ul>	  
	  </li>
	  <li class="mn_firstlvl"><a class="dir" href="#">c ccccccc</a>
	   <ul>
	  <li><a href="#">text</a></li>
	  <li><a href="#">texton</a></li>
	  </ul>
	  </li>
	  <li class="mn_firstlvl"><a href="#">ddd dd ddddddd</a>
	  </li>
	  <li class="mn_firstlvl"><a class="dir" href="#">eeeeeeeeeeeeeee</a>
	  <ul>
	  <li><a href="#">text_ter_text</a></li>
	  <li><a href="#">text</a></li>
	  </ul>
	  </li>
	  <li class="mn_firstlvl"><a href="#">fffffffff</a></li>
	  <li class="mn_firstlvl"><a class="dir" href="#">jjjjjjj</a>
	  <ul>
		<li><a href="#">Сотрудники</a></li>
		<li><a href="#">Адресная информация</a></li>
		<li><a href="#">Обратная связь</a></li>
	  </ul>
	  </li>
	</ul>
  </div>
 </div>
</body>
</html>

CSS

@charset "utf-8";
/*———css reset——————*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-size:12px;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.clear{
clear:both;
font-size:0px;
line-height:0px;
}
.wrapper {
	width: 892px;
	margin: 0 auto;
	margin-bottom:-51px
}
.mainmenu {
	height: 32px;
	width: 885px;
	background-image: url(images/menubackground.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
*html .mainmenu {
	overflow: hidden;
}
/*———-dropdown——-*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.dropdown {
	position: relative;
	z-index: 597;
	float: left;
}
ul.dropdown li {
	float: left;
	line-height: 1.3em;
	vertical-align: middle;
	zoom: 1;
	margin:0 24px;
}
*html ul.dropdown li {
	float: left;
	line-height: 1.3em;
	vertical-align: middle;
	zoom: 1;
	margin:0 23px;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}
ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 31px;
	left: 0;
	z-index: 598;
	width: auto;
	display:inline;
	background-image: url(images/submenufon.png);
}
ul.dropdown ul li {
	float: none;
	margin-left:0;
	margin-right:0;
/*	zoom:1;*/
}
*html ul.dropdown ul li:hover {
background-color:#c4cbd3;
}
ul.dropdown ul li a{
	color:#FFFFFF;
	font-size:11px;
	line-height:14px;
	white-space: nowrap;
	font-family:Tahoma;
	font-weight:bold;
	text-transform: none;
	padding:8px 16px;
	display:block;
}
*html ul.dropdown ul li a{
width:100%;
}
ul.dropdown ul li a:hover{
background-color:#c4cbd3;
}

ul.dropdown ul ul {
	top: 1px;
	left: 99%;
}
ul.dropdown li:hover > ul {
	visibility: visible;
}
.dropdown a {
	color: #2f7ace;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 11px;
	font-weight:bold;
	text-transform: uppercase;
}
.mn_firstlvl {
	display: block;
	float: left;
	background-image: url(images/graymenuline.gif);
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 32px;
}
.mn_firstlvl:hover{
background-image: url(images/bluemenuline.gif);
}
.mn_firstlvl a {
line-height:27px;
}

Edited May 21, 2010 by alexander.parphenuyk

psywalker · May 21, 2010

Всё правильно.

ul.dropdown ul {

visibility: hidden;

position: absolute;

top: 31px;

left: 0;

z-index: 598;

width: auto;

background: #C33 ;

}

У тебя тут ширина выставлена в Авто. И абсолютные элементы получают ширину по содержимому. Выход: Поставить фиксированную ширину.

alexander.parphenuyk · May 21, 2010

фиксированная ширина это конечно хорошо =\ ...

но это не выход.. так как могут добавляться новые подпункты меню.....

кроме фикированной ширины нету больше выхода?

ps ну ведь в остальных браузерах всё чётко работает как надо..... даже ie8 уже всё правильно понимает... =(

psywalker · May 21, 2010

Чисто для ИЕ.

Поставь минимальную ширину под самый намечаемый длинный по ширине пункт. А если уж пункты будут больше, то просто будут опять такие косяки именно в ИЕ. Но пока таких пунктов не будет, то и косяков тоже не видать тебе)

Sign In

Проблемы со списками в ие 6-7

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information