Маркированный список.

Red Planet · January 25, 2011

Добрый день. Поставил маркеры с помощью list-style: url(images/sdbr-marker.gif). Слишком большой отступ у них от пунктов списка. Ладно бы это было на Internet Explorer 6, но это наблюдается на последней Opera 11, и на Mozilla Firefox 3.6.13. Сами маркеры сползают немного относительно текста (ведь должны быть по центру). Как проблему решить?

Internet Explorer 6.

Opera 11 (уходят вверх).

Mozilla Firefox 3.613 (уходят вниз).

HTML.

<!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" />
 <title>XHTML Strict</title>
 <link href="my-style.css" rel="stylesheet" type="text/css" />

 <!--[if lt IE 7]>
	 <script defer="defer" type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script>
	 <script src="min-max-ie6-fix.js" defer="defer" type="text/javascript"></script>
	 <link href="my-style-ie.css" rel="stylesheet" type="text/css" />
 <![endif]-->
 </head>

 <body>
	 <div id="cont">
		 <ul class="list-in-sdbr">
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li><a href="#">Lorem Ispum</a></li>
			 <li class="last-in-list"><a href="#">Lorem Ispum</a></li>
		 </ul>
	 </div>
 </body>
 </html>

CSS.

body {
	 background: #08526a;
	 font-family: Arial, Helvetica, sans-serif;
 }


 img {
	 border: none;
 }


 * {
	 margin: 0;
	 padding: 0;
 }


 a, a:hover {
	 text-decoration: none;
 }


 #cont {
	 width: 240px;
	 margin: 0 auto;
 }


 ul.list-in-sdbr li.last-in-list {
	 border-bottom: none;
 }


 ul.list-in-sdbr {
	 font-size: 11px;
	 margin: 16px 10px 30px 20px;
 }


 ul.list-in-sdbr li {
	 border-bottom: 1px dashed #206c85;
	 list-style: url(images/marker-sdbr.gif);
	 margin-bottom: 6px;
 }


 ul.list-in-sdbr li a {
	 color: #a7d5e4;
 }


 ul.list-in-sdbr li a:hover {
	 color: #dff2f8;
 }

Edited January 25, 2011 by Red Planet

Vlad · January 25, 2011

На форуме эта тема уже поднималась, сошлись на том, что маркеры надо ставить через обычный background, а не list-style.

Red Planet · January 25, 2011

Vlad, понял, буду ставить на фон элемента списка.

Sign In

Маркированный список.

Question

Red Planet

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Red Planet

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information