unordered list not worrking

  • oweibor

    (@oweibor)


    9 years, 5 months ago

    i have searched this forum and didn’t find any solution to this.
    my WordPress blog list does not indent properly if the list element’s content enters the second line. i found a fix on stackoverflow http://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css, which i implemented as shown below:

    .entry ol,.entry li {
margin: 0; padding: 0;
}
.entry ol {
counter-reset: foo;
display: table;
}
.entry li {
list-style: none;
counter-increment: foo;
display: table-row;
}
.entry li::before {
content: counter(foo) ".";
display: table-cell;
text-align: right;
padding-right: .5em;
padding-left: .5em;
}
.entry ul li {
list-style: inside disc;
list-style-image: none;
line-height: 19px;
}

    after the above implementation, i got the proper indentation for my list, however, whenever i try to use an unordered it tends to appear as an ordered list. even worse, when i try to use and unordered list as a sublisting within an ordered list, (things get crazy), it appears as a continuation of my ordered list instead of appearing as an unordered.
    see an example in the blog i am currently working on:

    http://www.medhealthng.com/abdominal-pain/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Matt Knowles

    (@aestheticdesign)

    9 years, 5 months ago

    It’s always been my experience that by default, the wrapped text of a li or ol is indented to match the first line. So I would spend more time looking at what your current CSS is doing to remove that, instead of doing something to patch it back to normal.

    I took a look at the page you linked to and it looks fine in Safari. Did you get your problem resolved?

    Thread Starter oweibor

    (@oweibor)

    9 years, 5 months ago

    thank you for your quick response… i was able to modify my code into:

    .entry ol, .entry li {
    margin: 0;
    padding: 0;
}

.entry ol {
counter-reset: foo;
display: table;
margin-left: 1.3em;
margin-right: 1.3em;
line-height: 19px;
}
.entry li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}
.entry li::before {
    content: counter(foo)".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
    padding-left: .3em;
}
}

    but what i’m really trying to archieve is display the unoredered list within an ordered list element as a disc instead of numbers.
    in a bid of avhieving this, i added the following to the css

    .entry ol>li::before {
    content: counter(notecntr, disc) " ";
    display: table-cell;
    text-align: right;
    padding-right: .8em;
    padding-left: .9em;
}

    but this kinda just turned everything to disc list type and the numbering disappeared. once again, what i’m really trying to archieve is display the unoredered list within an ordered list element as a disc instead of numbers.

    MarkRH

    (@markrh)

    9 years, 5 months ago

    Looked at that page and everything looks like an unordered list (discs), even though an ordered list tag <ol> is used.

    For unordered lists, use the <ul> tag.

    Thread Starter oweibor

    (@oweibor)

    9 years, 5 months ago

    @markrh thanks alot for your idea… but the true owner of this blog does not know a thing about html or css, that why manually changing the tags wont work…l but even when i use <ul> as a sublist within an <ol> , the numbering for the <ul> still shows as a number

    <ol>
	<li>Abdominal pain is pain that is felt </li>
	<li>Abdominal pain comes from organs within the abdomen </li>
	<li>Abdominal pain is caused by inflammation</li>
	<li>Abdominal pain in irritable bowel syndrome (IBS)</li>
	<li>Symptoms associated with abdominal pain may include:
	<ul>
		<li>Bloating</li>
		<li>Gas (flatus, farting)</li>
		<li>Indigestion</li>
		<li>Pain in the upper left or right</li>
		<li>Constipation</li>
		<li>GERD</li>
		<li>Heartburn</li>
		<li>Chest pain</li>
	</ul>
</li>
</ol>

    the inner sublist above will appear as a number… but what i really want is to show a properly indented disc bullet when i use a <ul> list as a sublist within an <ol> . i have modified my css to look like this

    .entry ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.entry ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0em;
}
.entry ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
  padding-left: 2em;
}

    once again, what i really want is to show a properly indented disc bullet when i use a <ul> list as a sublist within an <ol></ol>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘unordered list not worrking’ is closed to new replies.