How to set line spacing of ordered list sequentially in browsers?

I have an ordered list that uses a larger Georgia for numbering and a smaller Arial font for text (as recommended in How to align two columns of text in CSS), I use p-tags inside li, so I can set the font size, which also sets the bound line height (assuming there is a normal line spacing if li works on more than one line). This is almost normal, but in firefox the distance between the bullets is much more complicated than any other browser, everyone else seems to add margin on the tags, despite the fact that the fields are set explicitly to 0. When I look at it using the developer tools in Chrome seems to add -webkit-margin-before: 1em; -webkit-margin-after: 1em; to tags that are not overridden. This may not be the case as it happens in browsers without a web browser other than FF, and everything else I read saysthat they are overridden by setting the fields (which are set in the code below and at the top of my css file with the whole css margin reset element). I would be very grateful if someone could indicate why I get more intervals in all browsers other than FF, since I tried to deal with it for ages and just can not understand why this is happening! FYI I tried to explicitly set the line height for each element, but this has exactly the same effect. You can see the code below.You can see the code below.You can see the code below.

Thank you very much for your help and for any advice anyone can give!

Dave

ol {
color: #ec008c;
margin: 0;
padding: 0 0 0 1.6em;
list-style-position: outside;
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}

ol li {
margin: 0;
padding: 0;
}

ol li p {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 10px;
color: #000000;
margin: 0 0 4px 0;
padding: 0;
display: block;
}

<div id="playlist">
<div id="playlistinner">
<p id="playlisttitle">The List</p>
<ol>
<li class="listitem"><p><strong>Entry 1</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 2</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 3</strong> - entry details that are much longer and span more than one line</p></li>
<li class="listitem"><p><strong>Entry 4</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 5</strong> - entry details</p></li>
</ol>
</div>
</div>
+3
source share
3 answers

You say that non-web kit, browsers other than Firefox seem to do the same. Have you looked using your developer tools? Both IE (except for 7; 6 have it as an addon, 8 and 9 turned it on, just press F12), and Opera has tools for developers. Check them out and see what causes them.

Opera puts the top and bottom margins of 1em in an element <p>, I don’t have a platform on which IE works, but I assume this is also the case. In the code and example that you give us, you do not have a marker for all reset elements, so you have nothing to redefine until you explicitly set the fields.

, , - line-height: 1;, .

, ? , , .

, ? , HTML5, , . , , .

+3

, - , li. line-height: 12px li Chrome, , FF.

+1

@deshg; , resetsheet. , li chrome

1) . , .

2) , this.

< >

. .

. p.

. svanelten, line-height li

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

IE7 Firefox/Opera/Chrome

0

All Articles