WordPress.org

Ready to get started?Download WordPress

Forums

Ordered and unordered list NOT working when viewing as article (21 posts)

  1. messo
    Member
    Posted 5 years ago #

    The problem: Ordered and unordered list does not show correctly in articles, but works fine on the front page. See for yourself, and give your opinion on what it can be.

    Test the following on this theme: http://wordpress.org/extend/themes/tropicala

    1. Click the Preview button on this theme and look at the HTML article where the ordered and unordered list are shown. Notice that they are showing correctly.

    2. Click the "HTML" title to view the text as an article / page, and notice that the ordered and unorderes list are formated in a totally different way!

    I have searched the CSS and PHP theme files for hours, but can't find the out what's causing this. So far I have found out that something in the code overrides the style.css theme file, but I don't know what, and why.

    The strange thing is that it shows perfectly at the frontpage, but not in "article" mode. Why? It's the same style.css file. Something must be different in article mode, but I can't figure out what it is.

    It may be a simple thing - I'm no expert on code. If anyone with a little experince could look into this, I would be very greatful!

    Thanks in advance :)

    EDIT: Tested in the most recent version of Safari and Firefox

  2. messo
    Member
    Posted 5 years ago #

    I have not found any soloution to this weird error yet. I know to little about css / php to track down the problem, I think :(

  3. sensibilitypatterns
    Member
    Posted 5 years ago #

    I'm having the same problem. My unordered list shows the bullet points in the WYSIWYG editor, but the bullets don't show when I preview the page or publish it. I guess I'll resort to using asterixes. :-(

    If you find a fix, I'd love to know about it.

    Thanks!

  4. zeniph
    Member
    Posted 5 years ago #

    the below will resolve for you

    in style.css:
    change line 187 to this:
    .article ul, .article ol, .post ul, .post ol {

    change line 193 to this:
    .article ul li , .post ul li {

    The theme's CSS had disabled all list bullets - unless they were explicitly told to display they didnt. The above tells lists inside the .post DIVs to display the same way as those found within the .article DIVs

  5. messo
    Member
    Posted 5 years ago #

    Awsome! Now my bullets work! Thank you so much :) I tried to fool around with those lines, but obviosly did'nt do it rigth.

    One more thing. The "cite" function have the same problem as the bullets did. It looks fine in WYSIWYG, but on the site its shown as normal text. Can this also have have been disabled in the css?

  6. zeniph
    Member
    Posted 5 years ago #

    no prob

    apart from the global margin, padding etc reset there's no CSS specifically for CITE tag - just looks like normal italic text to me which I think is how the theme's author intended it.

  7. messo
    Member
    Posted 5 years ago #

    Thanks, I will look into it. Sounds like something I can fix myself :)

  8. hive101
    Member
    Posted 5 years ago #

    Thank you zeniph for posting this fix. I had the same issue and was relieved to find a solution!

  9. Carol7
    Member
    Posted 5 years ago #

    Hi, I'm having the same problem and I can't find the code referenced in the solution above in the style sheet. The theme is "Ikarus White."

    I'm trying to create unordered bulleted lists in pages and postings. Not sure if the issue is in the code below or is it something else entirely?

    /* Small text */
    small, .small, .smalldark, .mosimage_caption, .createdate {
    	color: #666666;
    	font-size: 80%;
    }
    p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
    	margin: 15px 0;
    	padding: 0;
    }
    ul {
    	list-style: none;
    }
    ul li {
    	padding-left: 10px;
    	line-height: 180%;
    }
    ol li {
    	margin-left: 35px;
    	line-height: 180%;
    }
  10. t31os
    Member
    Posted 5 years ago #

    The list style is set to none here look..

    ul {
    	list-style: none;
    }

    Either remove it or change to..

    ul {
    	list-style: disc;
    }

    Disc is default.....

    Possible values..

    none
    disc
    circle
    square
    decimal
    decimal-leading-zero
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    lower-greek
    lower-latin
    upper-latin
    hebrew
    armenian
    georgian
    cjk-ideographic
    hiragana
    katakana
    hiragana-iroha
    katakana-iroha

  11. Carol7
    Member
    Posted 5 years ago #

    t31os, thanks for the answer. Before seeing your response, I experimented with the html code on the page and found that if I removed the <ul></ul> tags around the list the bullets displayed....not sure what is in the style sheet that makes it work that way. Thanks again for replying =)

  12. t31os
    Member
    Posted 5 years ago #

    It may not be advisable to remove those from the HTML, since you could be generating half built lists... or non-valid code...

    The suggestion i gave before would resolve the problem without causing any problems...

    This part in style.css

    ul {
    	list-style: none;
    }

    Is basically saying set the list style to NONE for all UL lists...

    All you need do is remove those lines or change them, as per my previous suggestion.

  13. Carol7
    Member
    Posted 5 years ago #

    t31os I tried and what you suggested works, but the way this theme (Ikarus) is written it added a second set of bullets to a sidebar list of blog pages that already had bullets :(

    I don't know enough css to fix it so that it defines page and post bullets separately from the theme's sidebar bullets. I set the value back to "none" until someone can help me with this.

  14. t31os
    Member
    Posted 5 years ago #

    Can you provide a link to your site?

  15. Carol7
    Member
    Posted 5 years ago #

    It's qeangroup.com/blog/
    You'll see the theme-provided bullets on the right in the sidebar area labeled "Pages."
    Thanks =)

  16. t31os
    Member
    Posted 5 years ago #

    Get rid of this...

    ul {
    	list-style: none;
    }

    And add this instead...

    #colwrap ul {
    	list-style-type:none;
    }

    If that doesn't work then try...

    #colwrap ul {
    	list-style-type:none!important;
    }

    That will remove the list bullets off any list items in the sidebar areas without effecting anywhere else..

  17. Carol7
    Member
    Posted 5 years ago #

    I'll try that; one question - if I get rid of

    ul {
    	list-style: none;
    }

    then how do I define the bullet in the css style sheet - do I replace "none" with "disc" in the #colwrap line?

  18. t31os
    Member
    Posted 5 years ago #

    The lists in the sidebars are using list-style-image already...

    By changing the above you just stop all UL lists being set to none...

    You'll have bullets elsewhere, but the sidebar will remain as it is.

  19. Carol7
    Member
    Posted 5 years ago #

    t31os, oooh that worked perfectly, the bullets are displaying where they should be. Is there a way to move the bulleted text slightly to the left? If not, I'll be happy with it the way it is now, because it looks so much better. Thank you!!!

  20. t31os
    Member
    Posted 5 years ago #

    Add these lines...

    #col1 ul li {margin:0}
    #colwrap ul li.page_item {margin:0;}
    #colwrap ul li.page_item ul {margin:4px 0 0;}

    Ideally this is what you should be using classes and IDs for on your list elements....

  21. Carol7
    Member
    Posted 5 years ago #

    Hi t31os, thanks for your patience. I copied the code in your post into the file. when I left the following code `ul li{
    margin-left: 15px;
    padding: 0px 0 5px 15px;
    }`
    in the file, nothing changed. When I took those lines out, the bullets moved too far to the left right next to the border of the column (and the text moved left).

    I appreciate your help, but don't want to take up more of your time - you really helped with the bullet issue and the page looks much better than before. Thank you again.

Topic Closed

This topic has been closed to new replies.

About this Topic