Thread

I’m having a problem formatting the ordered list / ol styles.

I’m using the following in the entry:

<ol><li>Item One</li>
<li>Item Two<li></ol>

With the following in the template:

div#content ol li {
list-style: decimal;
margin: 5px auto 10px 25px;
font-style: normal;
}

Whilst it appears to be working when I click on ‘Update’ it doesn’t format the list items online.

Any idea what might be causing this? Have I made a mistake with the template code?

Any help would be much appreciated! 😊

Kind regards, Richard

Hi, Richard,

Do you have a link to where we can see this output?

Thanks!

Hi Lisa

Here’s the link:

http://film.edusites.co.uk/article/meaning-in-film-mise-en-scene/

The ordered list is just below the first image on the left.

Thanks for responding so swiftly. 😊

Kind regards, Richard

Hi, Richard - my pleasure =)

do you mean this?

<ul><b><li>Camerawork</li>
<li>Mise-en-scène</li>
<li>Sound</li>
<li>Editing</li></b></ul>

? 

If not, specifically which text?

Nope - this:

  Item One
  Item Two

Just below the picture of Leonardo DiCaprio.

Thanks again. 😊 Kind regards, Richard

I see it.  The source is:

<ol><li>Item One</li>
<li>Item Two</li></ol>

So it is, in fact, an ordered list.  That means that the source is right; the styling for that is a CSS issue.  I suspect you have some inheritance issues with the cascading in your stylesheet.  Unfortunately troubleshooting the design is not something that is part of technical support; so I’m going to shift this down to Community Help for more eyes. 

I would recommend perhaps some reduction testing and definitely validating your CSS and HTML as a first step. =)

Thanks Lisa. That’s very helpful.

Hopefully someone in the community will help with the latter! 😊

Kind regards, Richard

Hi Richard,

Does this work :

#content #innerContent ol li {
        list-style: decimal;
        margin: 5px auto 10px 25px;
        font-style: normal;
}

Might just be that you need to be a little more specific with your CSS here?

Mark

Thanks Mark. The weird thing is that I’ve copied the css from another site of mine in which the ordered list is working. The problem arose when I tried to create an ordered list with the number and full stop in bold with the item itself in normal style. When I compare the two I can’t see a difference.

This site’s CSS (not working):

div#content ol li {
list-style: decimal;
margin: 5px auto 10px 25px;
font-style: normal;
}

The other site’s CSS (working):

div#content ol li {
list-style: decimal;
margin: 5px auto 10px 25px;
font-style: normal;
}

What else could be interfering?

Hi Richard,

Very difficult to say I’m afraid without seeing both sites side to side. If they were literally just straight copies of one another then yes this indeed would be a little odd but without seeing the other site it really is very difficult to say.

It definitely seems like a specificity problem here though. Did you try with the CSS code I supplied above? Did that work?

Mark

Thanks Mark. I did try your fix but no joy.

Kind regards, Richard

As I’ve been unable to resolve this problem I’ve decided to use a workaround. I’ll be using bold tags on the numbered list and indenting the set using bquote. Clunky and time consuming but it gets the job done. I’ve now removed the sample code / ordered list items from the url I referred to previously.

Thanks for your help. 😊

Kind regards, Richard