Home/ Questions/Q 5988517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:58:09+00:00

I have an ordered list which uses large Georgia for the numbering and smaller

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0