Отступы в списке

Vlad · February 14, 2011

Есть следующий список. В IE7 между пунктами наблюдается небольшой промежуток, в остальных браузерах его нет. Как убрать знаю, но не могу понять, откуда он берется. Что скажете?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Меню</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   LI {
	list-style: none; /* Убираем маркеры */
	border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
	width: 200px; /* Ширина меню */
   }
   A {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	color: #666; /* Цвет текста */ 
   }
  </style>
 </head>
 <body>
	<ul>
	 <li><a href="linkcl.html">Cyп-харчо</a></li>
	 <li><a href="linkc2.html">Лилибдж</a></li>
	 <li><a href="linkc3.html">Чихиртма</a></li>
	 <li><a href="linkc4.html">Шашлык</a></li>
	</ul>
 </body>
</html>

psywalker · February 14, 2011

Хааа, ну ты и приколист, спросил тоже, откуда он берётся)

Влад, ЭТО IE

А мир спасает как обычно zoom:1;)

Vlad · February 14, 2011

Понятно что IE, но даже у него какая-то логика есть. Или нет?

LunatiK · February 14, 2011

Ваапще никакой логики: задаём бордер к ul и отступ изчезает между первым и вторым li

psywalker · February 14, 2011

Понятно что IE, но даже у него какая-то логика есть. Или нет?

Есть. Когда не прописываешь ссылке например ширину, то она сама выбирает отступы, т.е. отталкивается от чего то IE-шного. Это один из их глюков. Тут надо смириться)

Vlad · February 14, 2011

А мир спасает как обычно zoom:1;)

zoom здесь не поможет, у элементов списка и так стоит hasLayout. Во-первых, float используется, во-вторых, абсолютное позиционирование, а в третьих, ширина задана.

psywalker · February 14, 2011

zoom здесь не поможет, у элементов списка и так стоит hasLayout. Во-первых, float используется, во-вторых, абсолютное позиционирование, а в третьих, ширина задана.

А ты ничего не путаешь? В твоём примере выше нет никаких абсолюта и флоатами и зума?

Vlad · February 14, 2011

Ваапще никакой логики: задаём бордер к ul и отступ изчезает между первым и вторым li

Действительно, ерунда какая-то.

А ты ничего не путаешь? В твоём примере выше нет никаких абсолюта и флоатами и зума?

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

psywalker · February 14, 2011

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

А можешь привести полный код.

Vlad · February 14, 2011

А смысл? Поведение IE7 абсолютно такое же. Пусть здесь даже нет float, но width ведь тоже hasLayout устанавливает. Так что в любом случае zoom никак не скажется.

psywalker · February 14, 2011

А смысл? Поведение IE7 абсолютно такое же. Пусть здесь даже нет float, но width ведь тоже hasLayout устанавливает. Так что в любом случае zoom никак не скажется.

ок, а где стоит флоат, а где абсолют?

Вот так?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Меню</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">

   LI {
	list-style: none; /* Убираем маркеры */
	border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
	width: 200px; /* Ширина меню */
	float: left;
	position: relative;

   }
   A {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	color: #666; /* Цвет текста */
	position: absolute;


   }
  </style>
</head>
<body>
	<ul>
	 <li><a href="linkcl.html">Cyп-харчо</a></li>
	 <li><a href="linkc2.html">Лилибдж</a></li>
	 <li><a href="linkc3.html">Чихиртма</a></li>
	 <li><a href="linkc4.html">Шашлык</a></li>
	</ul>
</body>
</html>

Vlad · February 14, 2011

Что ты докопался до этого! Они здесь не при чем. В примере первого поста их нет? Нет, а отступы есть и hasLayout стоит.

psywalker · February 14, 2011

Что ты докопался до этого! Они здесь не при чем. В примере первого поста их нет? Нет, а отступы есть и hasLayout стоит.

Вот у меня отступов нет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Меню</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">

   LI {
	list-style: none; /* Убираем маркеры */
	border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
	width: 200px; /* Ширина меню */



   }
   A {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	color: #666; /* Цвет текста */
	zoom:1;



   }
  </style>
</head>
<body>
	<ul>
	 <li><a href="linkcl.html">Cyп-харчо</a></li>
	 <li><a href="linkc2.html">Лилибдж</a></li>
	 <li><a href="linkc3.html">Чихиртма</a></li>
	 <li><a href="linkc4.html">Шашлык</a></li>
	</ul>
</body>
</html>

Scrum · February 14, 2011

Точно не помню но вроде связанно с тем что в конце </li> автоматически добавляться перенос строки.

psywalker · February 14, 2011

Точно не помню но вроде связанно с тем что в конце </li> автоматически добавляться перенос строки.

Возьми мой последний пример, протести. У тебя есть отступы?

Vlad · February 14, 2011

Чёртов IE, ни за что бы не догадался, что hasLayout надо поставить напрямую ссылке, а не пункту списка! Спасибо.

Заменил zoom: 1 на height: 1%, так оно красивее будет, а результат тот же.

Scrum · February 14, 2011

Возьми мой последний пример, протести. У тебя есть отступы?

Дело не решении.

Как убрать знаю, но не могу понять, откуда он берется.

А в причине.

Возьми мой последний пример, протести. У тебя есть отступы?

нет.

psywalker · February 14, 2011

Чёртов IE, ни за что бы не догадался, что hasLayout надо поставить напрямую ссылке, а не пункту списка! Спасибо.
Заменил zoom: 1 на height: 1%, так оно красивее будет, а результат тот же.

Да, погоди, не надо никаких height: 1%, я же тут привёл логику этого браузера.

http://forum.htmlbook.ru/index.php?s=&...st&p=182831

Если ты делаешь ссылку блочной, и при этом ширина ей ненужна. Поставь ей ширину width: 100%; и всё. Вот самое нормальное решение.

Scrum · February 14, 2011

Чёртов IE, ни за что бы не догадался, что hasLayout надо поставить напрямую ссылке, а не пункту списка! Спасибо.
Заменил zoom: 1 на height: 1%, так оно красивее будет, а результат тот же.

Ну а коль дело в решение то можно и в одну строчку все li записать.

Так вообще элегантно и без хак приемов.

Great Rash · February 14, 2011

Нашел достаточно странный фикс этой проблемы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Меню</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   LI {
	list-style: none; /* Убираем маркеры */
	border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
	width: 200px; /* Ширина меню */
   }
   A {
	display: inline-block; /* Странный фикс... хз как работает */
   }
   A {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Убираем подчеркивание у ссылок */
	color: #666; /* Цвет текста */ 
   }
  </style>
</head>
<body>
	<ul>
	 <li><a href="linkcl.html">Cyп-харчо</a></li>
	 <li><a href="linkc2.html">Лилибдж</a></li>
	 <li><a href="linkc3.html">Чихиртма</a></li>
	 <li><a href="linkc4.html">Шашлык</a></li>
	</ul>
</body>
</html>

psywalker · February 14, 2011

Ну а коль дело в решение то можно и в одну строчку все li записать.
Так вообще элегантно и без хак приемов.

Нет, это неправильно. От этого страдает семантика.

Scrum · February 14, 2011

Нашел достаточно странный фикс этой проблемы:

Вах вообще супер.

Нет, это неправильно. От этого страдает семантика.

Прости чего страдает ? ))))

psywalker · February 14, 2011

Да, прикольный фикс))))

Прости чего страдает ? ))))

Структура становиться менее читаемой.

Scrum · February 14, 2011

А вот не буду разводить хв.

Vlad · February 14, 2011

Ничего странного в этом фиксе нет, ноги его растут всё из одного места — из hasLayout. Цитирую.

hasLayout устанавливается автоматически, если для элемента заданы следующие свойства и значения.
• display: inline-block
• position: absolute
• float: left | right
• zoom: 1
• width: любое значение кроме auto
• height: любое значение кроме auto
• writing-mode: tb-rl
• overflow: hidden | scroll | auto (только для IE7)

Так что вариантов добиться одного результата несколько, выбирайте подходящий.

psywalker · February 14, 2011

А вот не буду разводить хв.

А зря

Ничего странного в этом фиксе нет, ноги его растут всё из одного места — из hasLayout. Цитирую.
Так что вариантов добиться одного результата несколько, выбирайте подходящий.

Ага, точно.

Sign In

Отступы в списке

Question

Link to comment

Share on other sites

33 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

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