display:table для ie6

Dioni$$ · January 26, 2011

Добрый вечер.

Есть такая проблема.

Есть меню вертикальное. Пункт активной страницы выделяется фоном.

Но нужно чтобы ширина пункта зависела от текста.

Вот пример

<!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>
<title>Меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {background:#719ca5;}
ul {list-style:none	}
 .menu {
 	padding:7px 0 40px 14;
	width:300px;

 }
 .menu li {
	display:table;
}
 .menu a {
	color:#fff;
	text-decoration:none;
	display:block;
	height:28px;
}
 .menu span {
	display:block;
	padding:0 10px
}
 .menu li ul {
	padding:0 0 0 30px;
}
.active {
	height:28px;
	background:url(images/mc.png) 0 0 repeat-x;
	margin:0 0 5px;

}
.active a {
	height:28px;
	background:url(images/ml.png) 0 0 no-repeat;
}
.menu .active a span {
	height:23px;
	background:url(images/mr.png) 100% 0 no-repeat;
	display:block;
	padding:5px 10px 0;
}
</style>

</head>
<body>
			<ul class="menu">
				<li class="active"><a href="#"><span>Пункт1</span></a></li>
				<li><a href="#"><span>Второй пункт</span></a></li>
				<li><a href="#"><span>Еще один пункт</span></a></li>
				<li><a href="#"><span>Второй пункт</span></a></li>
				<li><a href="#"><span>Еще один пункт</span></a></li>
					<ul>
						<li class="active"><a href="#"><span>- а это подпункт</span></a></li>
						<li><a href="#"><span>- и другой подпункт</span></a></li>
						<li><a href="#"><span>- и вообще третий</span></a></li>
					</ul>
				</li>
				<li><a href="#"><span>Просто пункт</span></a></li>
			</ul>
</body>
</html>

Проблема в том что ширина пункта тянется на ширину контейнера (в данном случае .menu).

Выглядит это где-то так

Вылечил я это дело добавлением

 .menu li {
	display:table;
}

Но в ие6,7 это естесственно не пашет.

Пробовал чисто для ие применить

.menu li {width:1px;}

работает но только для однословных пунктов.

так что не вариант.

Ну а должно все так выглядеть

Подскажите плиз как побороть. И возможно есть другие варианты (не display:table) - буду рад любой помощи

deadrash · January 26, 2011

white-space: nowrap; запретит перенос строк.

Scrum · January 26, 2011

<!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>
<title>Меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {background:#719ca5;}
ul {list-style:none}
.menu {
    padding:7px 0 40px 14;
    width:300px;
}
.menu a {
    color:#fff;
    text-decoration:none;
}
.menu li {
  padding: 3px;
}
.active {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #990000;
padding: 3px;
}


</style>

</head>
<body>
            <ul class="menu">
                <li ><a href="#" class="active">Пункт1</a></li>
                <li><a href="#">Второй пункт</a></li>
                <li><a href="#">Еще один пункт</a></li>
                <li><a href="#">Второй пункт</a></li>
                <li><a href="#">Еще один пункт</a></li>
                <li>
                    <ul>
                        <li ><a href="#" class="active">- а это подпункт</a></li>
                        <li><a href="#">- и другой подпункт</a></li>
                        <li><a href="#">- и вообще третий</a></li>
                    </ul>
                </li>
                <li><a href="#">Просто пункт</a></li>
            </ul>
</body>
</html>

бекграунд можно положить картинкой, для осликов используйте PIE

Dioni$$ · January 26, 2011

deadrash - спасибо

Dioni$$ · January 27, 2011

вот только width:1px; не работает для ие7

вернее работает - но как раз так как надо - то есть делает ширину в 1 пиксель

SelenIT · January 27, 2011

Как вариант, display:inline; zoom:1 (это в сумме дает inline-block для IE<8). Или float + clear (float-ы тоже обжимаются по содержимому), но выше риск непредсказуемости...

Dioni$$ · January 27, 2011

Как вариант, display:inline; zoom:1 (это в сумме дает inline-block для IE<8).

Супер - спасибо

Sign In

display:table для ie6

Question

Dioni$$

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

deadrash

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information