How to set line spacing of an ordered list consistently across browsers?

I have an ordered list which uses large Georgia for the numbering and smaller Arial font for the text (as recommended at How to align two columns of text in CSS). I am using p tags within the li's so i can set the font size which also sets the associated line height (ensuring that there is normal line spacing if the li's run over more than one line). This is nearly fine, however in firefox the spacing between the bullets is much tighter than any other brower, all others seem to be adding a margin above the p tags despite explicitly setting the margins to 0. When i look at it using developer tools in Chrome it seems to add -webkit-margin-before: 1em; -webkit-margin-after: 1em; to the p tags which are not overridden. This may not be the cause as it also happens in non webkit browsers apart from FF and everything else i've read says these are overridden by setting the margins (which are set in the code below and at the top of my css file with an all element css margin reset). I would be immensely grateful if anyone could point out why I'm getting more spacing on all non FF browsers as I've been trying to work it out for ages and just cannot see why it's happening! FYI I have tried explicitly setting the line heights of each element but this has exactly the same effect. You can see the code below.

Thanks so 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> - e开发者_如何学运维ntry 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>

You mention non-webkit, non-Firefox browsers appear to do the same thing. Have you looked using their developer tools? Both IE (except for 7; 6 has it as an addon; 8 and 9 have it included, just hit F12) and Opera have developer tools. Check them out and see what's causing it in them.

Opera puts a 1em top and bottom margins on the <p> element, I don't have a platform that IE runs on, but I assume it does, too. In the code and example you give us, you have no all-element margin reset, so there's nothing to override until you explicitly set the margins.

Another thing you can do is set line-height: 1; to tighten things up farther.

Aso, have you considered restructuring a little? From what you've posted here, your content might be better suited to a definition list.

On a side note, why are you using frames? Not only are they being deprecated in HTML5, but there are several major reasons why they are bad. If you want to have a single file for universal stuff, such as headers and navigation, then have a look at server side includes.

I guess that it could be connected to the line-height of larger font you use in the li element. If I add line-height: 12px to the li-style in Chrome, the spacing looks the same as in FF.

@deshg; first i want to say that use resetsheet. Now the problem is that there is an extra spacing between li in chrome

REASON

1) each user-agent have there own default properties . So, they rendered differently.

2) May be is a structural also for more check this .

solutions

a. use resetsheet.

b. better to give span instead of p.

c. As svanelten said give line-height in your li for more check the links

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

Spacing differences between IE7 and Firefox/Opera/Chrome