IE неверно отображает список

[andrystepa]

Почему-то Интернет эксплорер отображает маркированный список на странице без маркеров и без интервалов между пунктами списка. А вот Опера отображает его почти правильно. Только вот в стиле указан маркер disk, а браузер отображает маркеры как square.

Вот код списка:

<ul>
    <li><a href="http://ansaldovei.ru/rus/18/">Статические тиристорные компенсаторы реактивной мощности - СТК (Фильтро-компенсирующие устройства - ФКУ, Тиристорные компенсаторы реактивной мощности - ТКРМ)</a> <br/>
    </li>
    <li><a href="http://www.ansaldovei.ru/rus/25/">Управляемый шунтирующий реактор трансформаторного типа - УШРТ</a>   </li>
    <li><a href="/rus/16/">Тиристорное пусковое устройство (Устройство плавного пуска - УПП, Устройство мягкого пуска) для плавного синхронного пуска синхронных двигателей - ТПУ. </a><br/>
    </li>
    <li><a href="http://ansaldovei.ru/rus/14/">Системы охлаждения на основе деионизованной воды для высоковольтной силовой электроники (ШСО) </a> </li>
    <li><a href="/rus/17/">Тиристорный преобразователь частоты (Сетевой преобразователь частоты - СПЧ) для непрерывного регулирования синхронных двигателей - ТПЧ </a></li>
    <li><a href="http://ansaldovei.ru/rus/15/">Тиристорный регулятор напряжения для плавного асинхронного пуска синхронных и асинхронных двигателей - ТРН</a> </li>
</ul>

Вот описание стиля:

<style>
	td{
		font-size:11px;
		font-family: Arial, Vardana;
		color:#333333;
	}
	body{
		margin:0px;
	}
	a{
		color:#003978;
		text-decoration: none;
		font-weight: bold;
	}
	a.menu{
		color: #FFFFFF;
		font-weight: normal;
		font-size:12px;
		display: block;

	}
	td.menu{
		padding-left:15px;
		background-color:#0157B7;
	}
	ul{
		padding-left: 4px;
		margin-left: 4px;
		margin-top: 12px;
		margin-bottom: 12px;
	}
        ul > li{
		list-style-image: url(/images/sq.gif);
		margin-left:20px;
		list-style-type: disc;
		padding-bottom:5px;
		font-size: 11px;
	}
	h1{
		font-size:12px;
		color: #003978;
		font-weight: bold;
		margin: 0px;
		padding: 0px;
	}
</style>

Впрочем перед указанным списком на странице стоит еще один список, в котором вид маркеров переопределен. Вот код вышестоящего списка:

<ul>
        <li  style="list-style-image: none;list-style-type:square"><a href="/rus/16/" title="тиристорное пусковое устройство">тиристорное пусковое устройство</a></li>
	<li style="list-style-image: none;list-style-type:square"><a href="/rus/17/" title="тиристорный преобразователь частоты">тиристорный преобразователь частоты</a></li>
        <li style="list-style-image: none;list-style-type:square"><a href="/rus/14/" title="системы охлаждения на основе деионизованной воды для высоковольтных силовых преобразователей">системы охлаждения на основе деионизованной воды для высоковольтных силовых преобразователей</a></li>
	<li  style="list-style-image: none;list-style-type:square"><a href="/rus/15/" title="тиристорный регулятор напряжения">тиристорный регулятор напряжения</a></li>
        <li style="list-style-image: none;list-style-type:square"><a href="/rus/18/" title="статический тиристорный компенсатор реактивной мощности">статический тиристорный компенсатор реактивной мощности</a></li>
</ul>

Может из-за него Опера отображает список с маркерами в виде диска? Но почему IE вообще не отображает маркеры?

[Helis]

Какой IE, для начала?

[andrystepa]

IE 9.0

[andrystepa]

Проверил еще браузеры - Firefox отображает правильно, Google Chrome отображает правильно, IE 8 и IE 7 отображают неправильно. Почему? Что за разнобой?

[wwt]

http://jsfiddle.net/sRLcf/

ff, IE,opera, chrome все показывают маркеры disc (точки). В опере они мелкие и создается впечатление что это мелкие квадраты, но вы можете масштабировать страницу или увеличить размер шрифта и убедитесь что это точки.

Плюс в разных браузерах и разных их версиях маркеры могут отличатся внешним видом. Для того чтобы привести маркеры к общему виду для всех браузеров обычно и используют list-style-image,

В вашем коде кстати сказать и используется картинка квадратика судя по названию гифки:

list-style-image: url(/images/sq.gif);

sq = square

Edited September 12, 2012 by wwt

[andrystepa]

http://jsfiddle.net/sRLcf/

ff, IE,opera, chrome все показывают маркеры disc (точки). В опере они мелкие и создается впечатление что это мелкие квадраты, но вы можете масштабировать страницу или увеличить размер шрифта и убедитесь что это точки.

Плюс в разных браузерах и разных их версиях маркеры могут отличатся внешним видом. Для того чтобы привести маркеры к общему виду для всех браузеров обычно и используют list-style-image,

В вашем коде кстати сказать и используется картинка квадратика судя по названию гифки:

list-style-image: url(/images/sq.gif);

sq = square

Спасибо. Все это я понял. Одно не понял - почему IE вообще ничего не показывает?

[wwt]

http://jsfiddle.net/sRLcf/

ff, IE,opera, chrome все показывают маркеры disc (точки). В опере они мелкие и создается впечатление что это мелкие квадраты, но вы можете масштабировать страницу или увеличить размер шрифта и убедитесь что это точки.

Плюс в разных браузерах и разных их версиях маркеры могут отличатся внешним видом. Для того чтобы привести маркеры к общему виду для всех браузеров обычно и используют list-style-image,

В вашем коде кстати сказать и используется картинка квадратика судя по названию гифки:

list-style-image: url(/images/sq.gif);

sq = square

Спасибо. Все это я понял. Одно не понял - почему IE вообще ничего не показывает?

у меня отображаются точки в IE в данном примере в версиях 7-8-9, почему у вас нет не могу сказать.

[andrystepa]

у меня отображаются точки в IE в данном примере в версиях 7-8-9, почему у вас нет не могу сказать.

Я тоже не знаю. Может из-за того, что в моем редакторе я не вижу весь код. А Вы на сайте посмотрите. Вот ссылка www.ansaldovei.ru Раздел Продукция. Я уже более чем на десятке компьютеров посмотрел - нет маркеров в IE!

[wwt]

У вас на сайте указан неполный доктайп

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

И сайт отображается в режиме совместимости. А в этом режиме IE не понимает селектора >

У вас два пути решения:

1)Указать правильный доктайп

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2) переписать селектор вместо UL > LI написать UL LI (но в этом случае и вложенные списки отобразятся с маркером).

[andrystepa]

У вас на сайте указан неполный доктайп

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

И сайт отображается в режиме совместимости. А в этом режиме IE не понимает селектора >

У вас два пути решения:

1)Указать правильный доктайп

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2) переписать селектор вместо UL > LI написать UL LI (но в этом случае и вложенные списки отобразятся с маркером).

Большое спасибо!! Теперь все браузеры показывают одинаково.