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>
deshg source
share