Маркированный список - HTML и CSS

Tir55 · 17.07.2013, 19:42

Некорректно отображаются маркированные списки в браузере Internet Explorer, в остальных браузерах все нормально. Как можно исправить данную проблему? Скриншот прилагаю.

Naive · 18.07.2013, 08:22

Можно попробовать для <ul>

Код:

zoom:1;

или

Код:

overflow: hidden;

Tir55 · 18.07.2013, 09:25

Если для .description .markdown ul поставить overflow: hidden;, то вот так получается не очень красиво, картинку не обтекает

Naive · 18.07.2013, 12:08

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

JTG · 18.07.2013, 13:12

Самое простое — list-style-position: inside

Если заюзать для маркеров картинки, можно сделать и с outside вот так:

Код:

<!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>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <style>
        img { 
            float: left;        
            margin-right: 10px; 
        }

        ul { 
            margin: 0px; 
            padding: 0px; 
            position: relative; 
            list-style-type: none;
            list-style-position: outside;        
        }

        li { 
            display: table;
            background: url('http://dl.dropboxusercontent.com/u/4509565/dHTMLExamples_com/CSS/bullet_go.png') no-repeat left top; 
            margin: 0;         
            padding-left: 20px;                
            min-height: 0;      /* IE7 */
        }

        * html li {
            height: 1px;        /* IE6 */
        }
    </style>
</head>

<body>
    <img src="http://programmersforum.ru/image.php?u=3477&dateline=1249921634">
    <ul>
        <li>Блабла</li>
        <li>Блабла</li>
        <li>Блабла<br>в две строчки</li>
        <li>Блабла</li>
        <li>Блабла</li>
        <li>Блабла</li>
        <li>Блабла</li>
        <li>Блабла</li>
        <li>Блабла</li>
    </ul>
</body>
</html>

Naive · 18.07.2013, 13:43

Цитата:

Сообщение от JTG

Самое простое — list-style-position: inside

Кстати, да... и красную строку можно сделать отрицательной потом)

Tir55 · 18.07.2013, 15:07

Спасибо. Сделал с помощью list-style-position: inside; и отрицательный text-indent.

18.07.2013, 08:22	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Можно попробовать для <ul> Код: `zoom:1;` или Код: `overflow: hidden;` Alar, верни репу!

18.07.2013, 12:08	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	На вкус и цвет фломастеры разные... Имхо, обтекание одним блоком текста изображения не очень удобно для восприятия информации читателем... Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
создать список л3 из элементов входящих и в список л1 и в список л2	goosha_gio	C++ Builder	1	27.06.2013 22:22
Создать односвязный список и вывести его на экран. Из этого списка создать новый список по указанному ниже правилу и новый список	San111	Паскаль, Turbo Pascal, PascalABC.NET	1	15.05.2012 22:08
Маркированный список в виде дерева c JS!	bulat786	JavaScript, Ajax	1	28.02.2012 16:27
Список с заглавным звеном, из текстового файла получить список из записей и по нему уже сделать задание	Zigfried	Помощь студентам	2	04.10.2010 20:29
связать список строк и список целых чисел	lirikoff	Помощь студентам	5	31.08.2010 13:23

18.07.2013, 15:07	#7
Tir55 Пользователь Регистрация: 16.07.2013 Сообщений: 14	Спасибо. Сделал с помощью list-style-position: inside; и отрицательный text-indent.