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


Tags: html,css

Problem :

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> - 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>


Solution :

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.


    CSS Howto..

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How can i get spaces between images with the same class?

    HTML or CSS, how is this done? [closed]

    How to use css3 transition on hover for td?

    How to script CSS to achieve hide/appear effect based on hover

    how to set !important on a multi value css transform?

    Angularjs - bind value from directive to ng-show/hide anywhere in document

    How to set css cursor value to variable within jQuery?

    how scrollable text line inside a div without showing scroll bars

    CSS menu - main option makes wider when submenu appears - how to fix it?

    does anyone know how to do this css transition? [closed]

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    HTML/CSS How to make a menu closed and then use class=“active”

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How would you code this: The SO highlighted button outline effect [closed]

    how can I add styles of structure to jquery plugin

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How to make all select elements 15px wider?

    Jquery content slider, how to duplicate without redundant code

    How to align items of a list CSS/jquery

    How to delete Bullets from an Unordered List using CSS?

    API embeded code is sending