Got more questions? Find advice on: SQL | XML | Regular Expressions | Windows
in Search
Welcome to AspAdvice Sign in | Join | Help

Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

Last post 12-23-2007, 9:04 PM by carlcamera. 9 replies.
Sort Posts: Previous Next
  •  12-20-2007, 7:14 PM 37846

    Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    Carl

    Help!

    Whenever I use "markdown" syntax in my articles to generate either an ordered (numbered) list or an unordered (bulleted) list, the numbers and bullets show at the bottom left of each item instead of the top left!

    It is really weird when a list item is lengthy, and its number or bullet shows at the bottom instead of at the top.

    If you want to see what I mean, look at my blog at http://dougjoseph.net/default.aspx?section=tech_talk 

    The lead article there shows a list about midway that displays the strange valignment.

    I'm searching my CSS page now for clues as to why!


    Sincerely,
    Doug Joseph
    Filed under:
  •  12-20-2007, 7:47 PM 37849 in reply to 37846

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    Also, just FYI:

    I created a test article just to compare the result of markdown with handtyped HTML tags.

    I tested by creating 4 different lists. (1) markdown with asterisks, (2) markdown with numbers, (3) html with <ul> tags, and (4) html with <ol> tags.

    My "research" showed that the vertical alignment problem affected the markdown results, but not the html tag results.

    Also, it was clear the CSS affecting the markdown results was different style code than the CSS affecting the HTML tag list results.

    I'm searching my CSS file now to see what is up.

    To make it easy for anyone else to create a test article like I did, that shows the four test lists, below is the content (because I'll be deleting my test article directly):

    ##Unordered List Test

    ####We will use both markdown and regular HTML tags in the following two unordered lists.

    The following list uses markdown to create the list items:

    *  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    *  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    *  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    *  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    The following list uses html tags to create the list items:


    <ul>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    </ul>


    ##Ordered List Test

    ####We will use both markdown and regular HTML tags in the following two ordered lists.

    The following list uses markdown to create the list items:

    1.  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    2.  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    3.  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    4.  This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.

    The following list uses html tags to create the list items:


    <ol>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    <li>This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item. This is the lengthy text of a bogus list item.</li>

    </ol>


    Sincerely,
    Doug Joseph
    Filed under:
  •  12-20-2007, 8:25 PM 37851 in reply to 37849

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    Carl

    I viewed the "rendered" source fed to the browser, and (when comparing the markdown lists versus the html lists) the one difference is the <p> tag. My markdown lists are getting rendered with a <p> tag. My html lists are not. Here is the pertinent portion of the rendered code:

                   <div class="articletext">
                      <h2>Unordered List Test</h2>
                      <h4>We will use both markdown and regular HTML tags in the following two unordered lists.</h4>
                      <p>The following list uses markdown to create the list items:</p>
                      <ul>
                         <li><p>Markdwon with asterisk. </p></li>
                         <li><p>Markdwon with asterisk. </p></li>
                         <li><p>Markdwon with asterisk. </p></li>
                         <li><p>Markdwon with asterisk. </p></li>
                      </ul>
                      <p>The following list uses html tags to create the list items:</p>
                      <ul>
                         <li>HTML with ul. </li>
                         <li>HTML with ul. </li>
                         <li>HTML with ul. </li>
                         <li>HTML with ul. </li>
                      </ul>
                      <h2>Ordered List Test</h2>
                      <h4>We will use both markdown and regular HTML tags in the following two ordered lists.</h4>
                      <p>The following list uses markdown to create the list items:</p>
                      <ol>
                         <li><p>Markdwon with numbers. </p></li>
                         <li><p>Markdwon with numbers. </p></li>
                         <li><p>Markdwon with numbers. </p></li>
                         <li><p>Markdwon with numbers. </p></li>
                      </ol>
                      <p>The following list uses html tags to create the list items:</p>
                      <ol>
                         <li>HTML with ol. </li>
                         <li>HTML with ol. </li>
                         <li>HTML with ol. </li>
                         <li>HTML with ol. </li>
                      </ol>
                   </div>

    I am currently searching my CSS file for what style settings would cause list bullets and list numbers (and font too) to be rendered differently when in a list PLUS in a <p> tag, versus not in a <p> tag. So far I am stumped. Somehow I am missing it.

    Below is a copy of my current CSS file contents:

     

    /* andreas01 - an open source xhtml/css website layout by Andreas Viklund  - http://andreasviklund.com - Free to use for any purpose as long as the proper credits are given to the original author.
    Version: 2.0 (Jun 25, 2006)
    Screen layout: */

    /***** Body and main container *****/
    #wrap {
    background:#ffffff;
    color:#303030;
    margin:0 auto;
    width:760px;
    }

    body {
     margin:0 auto;
     padding:0;
     background:#F1EBCE url('bg.gif') repeat-y top center;
     color:#303030;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     font-size:76%;
     font-family:Verdana, Tahoma, Arial, sans-serif
    }

    @font-face {
     font-family: "Libel Suit";
     src: url("http://www.dougjoseph.net/<<my vinetype folder>>/libelsuit.ttf")
    }

    body ul.section #nav_searchresults
    {
       display:none;
    }

    /* GOOGLE ADSENSE STUFF */
    /*this div spans across top of page, for the big leader ad*/
    #googleheaderdiv {
    width:100%;
    color:#303030;
    text-align:center;
    background:#DFD2B0 url('googleheader.gif') repeat-y top center;
    margin:0 auto;
    padding-top:0px; padding-bottom:1px;
    border-bottom:1px solid #AD8D5F;
    }

    /*these 2 divs are place holders (left & right ) for the 2 search options (site, web)*/
    #googleblogsearchdiv {
    clear:left;
    float:left;
    width:75%;
    height:77px;
    text-align:right;
    text-valign:top;
    margin:0 auto;
    padding:0;
    }

    #googlewebsearchdiv {
    clear:right;
    float:right;
    width:25%;
    height:77px;
    text-align:left;
    text-valign:top;
    margin:0 auto;
    padding:0;
    }

    /***** Various tags *****/
    a {
    text-decoration:none;
    font-weight:bold;
    color:#286ea0;
    background-color:inherit;
    }

    a:hover {
    text-decoration:underline;
    color:#286ea0;
    background-color:inherit;
    }

    a img {
    border:0px none;
    }

    /***** Header *****/
    #header {
    margin:10px 0 0;
    padding:0;
    }

    #headerleft {
    clear:left;
    float:left;
    width:320px;
    margin:0 auto;
    padding-top:0;
    }

    #headerright {
    clear:right;
    float:center right;
    width:380px;
    margin:0 auto;
    padding:0;
    }

    #headerimage {
    background:#F1EBCE url('header.gif') repeat-y top center;
    color:#303030;
    margin:0 auto;
    width:100%;
    height:20px
    }

    #footerimage {
    background:#F1EBCE url('footer.gif') repeat-y top center;
    color:#303030;
    margin:0 auto;
    width:100%;
    height:20px
    }

    #header h1 {
    color:#4B0000;
    background-color:inherit;
    width:100%;
    margin:8px 0 0 0;
    font-size:2.2em;
    }

    #header h1 a{
    color:#4B0000;
    background-color:inherit;
    text-decoration:none;
    }

    #header p {
    color:#4B0000;
    margin:0 0 2px 0;
    font-size:1.1em;
    font-weight:bold;
    line-height:1.3em;
    background-color:inherit;
    }

    #header p.normal {
    color:#808080;
    margin:0 0 17px 0;
    font-weight:normal;
    font-size:1em;
    line-height:1.2em;
    background-color:inherit;
    }

    #frontphoto {
    border:0px none;; margin-left:0; margin-right:0; margin-top:0; margin-bottom:10px
    }

    /***** Left sidebar *****/
    #secondary {
    clear:left;
    float:left;
    width:99px;
    margin:0 0 5px;
    padding:0;
    }

    #secondary h2, #secondary h3 {
    color:#4B0000;
    background-color:inherit;
    font-size:1.3em;
    margin:0 0 5px;
    padding:0;
    }

    #secondary div.announce {
    clear:left;
    margin:20px 0 5px;
    padding:7px 5px;
    width:95px;
    font-size:0.9em;
    background-color:#F1EBCE;
    color:#4B0000;
    border-left:4px solid #cccccc;
    line-height:1.5em;
    }

    #secondary div.announce p {
    margin:10px 0 0;
    padding:0;
    }

    #secondary div.announce ul {
    margin:10px 0 0;
    padding:0;
    list-style:none;
    }

    #secondary div.announce li {
      border-top: 1px solid #ddd;
      padding: 8px 0 5px 0;
    }


    /***** Main menu *****/
    ul.section, ul.nav {
    width:99px;
    margin:0 0 20px 0;
    padding:0;
    list-style:none;
    float:left;
    }

    ul.section li, ul.nav li {
    width:99px;
    padding:0;
    line-height:1.4em;
    float: left;
    margin-bottom:5px;
    }

    ul.section li a,
    ul.nav li a {
    background-color:#F1EBCE;
    color:#4B0000;
    font-weight:bold;
    width:99px;
    float:left;
    padding:5px 1px 5px 5px;
    border-left:4px solid #cccccc;
    text-decoration:none;
    }

    ul.section li.sectionactive {
    background-color:#eaeaea;
    border-left:4px solid #286ea0;
    color:#4B0000;
    font-weight:bold;
    width:99px;
    margin-bottom:5px;
    padding:5px 0 5px 5px;
    }

    ul.section li.sectionowner a {
    background-color:#eaeaea;
    }

    ul.section li a:hover,
    ul.nav li a:hover {
    background-color:#eaeaea;
    border-left:4px solid #286ea0;
    color:#4B0000;
    text-decoration:none;
    }

    ul.nav {
    margin:0 0 20px 0;
    padding: 0 0 0 4px;
    font-size:0.9em;
    float:left;
    }


    ul.nav li a {
    padding:3px 0 3px 4px;
    width: 99px;
    }

    p.navheading {
      margin: 0 0 5px 0;
      font-weight:bold;
      padding-left: 4px;
    }

    /***** Right sidebar *****/
    #extras {
    float:right;
    width:109px;
    margin:0;
    padding:0;
    line-height:1.4em;
    }

    #extras p {
    font-size:0.8em;
    font-weight:small;
    margin:0 0 10px 0;
    padding:0;
    }

    #extras ul {
    font-size:0.9em;
    margin:0 0 16px 0;
    padding:0;
    }

    #extras li {
    list-style:none;
    line-height:1.2em;
    margin:0 0 6px 0;
    padding:0;
    }

    #extras ul ul {
    margin:6px 0 0 10px;
    padding:0;
    }

    #extras ul ul li {
    margin: 0 0 4px 0;
    }

    #extras ul ul li a {
    font-size:1.1em;
    font-weight:normal;
    }

    #extras h2 {
    color:#4B0000;
    background-color:inherit;
    font-size:1.2em;
    margin:0 0 10px;
    padding:0;
    }

    #extras h3 {
    color:inherit;
    background-color:inherit;
    font-size:1.0em;
    margin:0 0 10px;
    padding:0;
    }

    #findboxdiv {
       margin-bottom: 1em;
    }

    #extratight {
    margin:0;
    padding:0;
    line-height:0.2em;
    }

    #extratight {
    font-size:0.2em;
    margin:0 0 0 0;
    padding:0;
    }

    /***** Main content *****/
    div#content {
      margin:0 119px 5px 119px;
      border-left:1px solid #e0e0e0;
      border-right:1px solid #e0e0e0;
      padding:0 10px;
      line-height:1.7em;
    }

    div#contentwide {
    margin:0 0 5px 150px;
    border-left:1px solid #f0f0f0;
    padding:0 0 0 10px;
    line-height:1.7em;
    }

    #content h2, #contentwide h2 {
    font-size:1.6em;
    margin:0 0 10px;
    }

    #content h3, #contentwide h3 {
    font-size:1.4em;
    margin:0 0 8px;
    }

    #content img, #contentwide img {
    border:0px none;
    }

    #content img.vipr {
      border: 0px none;
      background:#fff
    }

    #content li, #contentwide li {
    margin:0;
    padding:0 0 0 0;
    }

    #content ul ul, #contentwide ul ul, #content ol ol, #contentwide ol ol{
    margin:0 0 0 16px;
    padding:0;
    }

    #content p, #content pre {
      overflow: auto;
      font-family: "Libel Suit", serif;
      font-size: 13pt;
    }

    #content pre, #content code {
      font-size: 9pt;
    }

    #content pre {
      padding: .5em;
      background-color:#F1EBCE;
    }

    #content blockquote {
      margin:0;
      padding:4px;
    }

    #content blockquote p {
      padding:0;
      margin:0;
    }

    #content blockquote,
    #content blockquote blockquote blockquote,
    #content blockquote blockquote blockquote blockquote blockquote {
      background-color:#F1EBCE;
    }

    #content blockquote blockquote,
    #content blockquote blockquote blockquote blockquote {
      background-color:#eaeaea;
    }


    span.commentsequence {
      font-weight:bold;
    }

    span.articlestats {
      list-style:none;
      text-align:left;
      font-size: .9em;
    }


    /* search results */


    h1.searchresults {
      font-size: 135%;
    }

    h4.searchresults {
      font-size: 125%;
      margin:0;
    }

    ul.searchresults {
      margin: 0 0 3em 0;
      padding:0;
     
    }

    ul.searchresults li {
      list-style: none;
      margin:0;
    }

    ul.searchresults li ul.searchstats {
      margin: 0;
      font-size: 90%;
      color: #777;
    }

    ul.searchresults ul.searchstats li {
      list-style: none;
      display: inline;
      padding: 0 4em;
    }

    .totalarthits {
      font-weight: bold;
      color: #555;
    }

    /* comments */

    div.commentdiv {
      padding:0px;
      background-color: #E1D2AF;
      width:500px;
    }

    div.commenthead {
      border-bottom: 1px solid #ADADAD;
      background-color: #DBDBDB;
      width:500px;
    }

    div.commentsequence {
      width:500px;
      float:left;
      font-size: 100%;
      color: #808080;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
    }

    div.commentgravatar {
      width:90px;
      float:left;
      padding-left: 2px;
      padding-right: 2px;
      padding-top: 2px;
      padding-bottom: 20px;
      background-color: #E1D2AF;
    }

    div.commentgravatar img {
    padding:5px;
    display:inline;
    background:#DBDBDB;
    color:#303030;
    border:4px solid #f0f0f0;
    }

    div.commentbody {
      width:395px;
      float:left;
      background-color: #F1EBCE;
      padding-left: 8px;
      padding-right: 3px;
      padding-top: 3px;
      padding-bottom: 20px;
    }

    /* administrative input */

    form.admincontent ul
    {
      list-style: none;
    }

     

    form#frmadmincontent ul,
    form#frmcomment ul,
    form#frmlogin ul {
      margin:0;
      border:0px none;
    }

    form#frmadmincontent ul li,
    form#frmcomment ul li,
    form#frmlogin ul li
    {
      list-style: none;
      display:inline;
      padding:0;
    }

    form#frmadmincontent select {
      width: 15.5em;
    }

    input,
    textarea {
      border: 1px solid #286ea0;
      padding-left: 0px;
    }

    .logform {
      width: 15em;
    }

    textarea.logform {
      font: inherit;
      width: 37em;
      height: 25em;
    }


    .required {
      border-left: 3px solid #8e0508;
    }

    p.required {
      font-style: italic;
      padding-left: 4px;
    }

    .notrequired {
      border-left: 3px solid #C0C0C0;
    }

    /* comment admin */

    div.wbacks {
      background-color:#F1EBCE;
      border: 1px solid #ccc;
      margin: 5px 0;
    }

    form#frmadmincontent ul li ul.wbadmin li {
      background:#eaeaea;
      display:block;
      color:#286ea0;
      font-size: 90%;
      font-weight:bold;
    }

     

    /***** Footer *****/
    #footer {
    clear:both;
    margin:0 auto;
    padding:10px 0 20px;
    border-top:4px solid #f0f0f0;
    width:760px;
    text-align:center;
    color:#808080;
    background:#ffffff;
    font-size:0.9em;
    }

    #footer a {
    color:#808080;
    background-color:inherit;
    text-decoration:none;
    }

    #footer a:hover {
    text-decoration:underline;
    }

    /***** Various classes *****/
    .left {
    margin:3px 10px 2px 0;
    float:left;
    }

    .right {
    margin:2px 0 2px 10px;
    float:right;
    }

    .textright {
    text-align:right;
    }

    .center {
    text-align:center;
    }

    .small {
    font-size:0.8em;
    }

    .bold {
    font-weight:bold;
    }

    .hide {
    display:none;
    }


    /* breadcrumbs */

    div#breadcrumbsdiv {
      background:#ffffff url('front.jpg') no-repeat top center;
      width:100%;
      height:142px;
      color:#EEE2D4;
      text-align:right;
      padding:0 0 0 0;
      margin-left:0;
      margin-right:10px;
    }

    p.subscribe {
      padding-top: 10px;
      padding-right: 10px;
      color:#EEE2D4;
    }

    a.subscribe {
      padding: 10px;
    }

    ul.breadcrumbs {
      margin: 0;
      margin-left: 5px;
      padding: 5px;
      display:inline;
      color: #EEE2D4;
      }

    span.breadcrumbsintro {
      }

    li.breadcrumbs,
    li.breadcrumbsfinal {
      display: inline;
      padding:0;
      margin: 0;
      }

    li.breadcrumbs a,
    li.breadcrumbs a:link {
      color: #ffffff;
      text-decoration:none;
      border-bottom: 1px dashed #EEE2D4;
      }

    li.breadcrumbs a:visited {
      color: #EEE2D4;
      border-bottom: 1px dashed #EEE2D4;
    }

    li.breadcrumbs a:hover {
      color: #ffffff;
      border-bottom: 1px solid #EEE2D4;
    }

    li.breadcrumbs a:active {
      color: #ffffff;
      border-bottom: 0px none;
    }

    li.breadcrumbsfinal {
      font-weight:bold;
    }

    /* find box addons */

    #submitfind {
      display:none;
    }


    Sincerely,
    Doug Joseph
    Filed under: ,
  •  12-20-2007, 9:13 PM 37854 in reply to 37851

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    Doug,

    I ran your markdown lists through the Markdown "dingus" and it appears that Markdown places lists into paragraph elements (by design.)

    Our best course of action would be to handle this through CSS with a rule to handle this they way you would like it to.  Try this:

    #content .articlediv li p { display: inline; }

    or perhaps

    #content .articlediv li p { margin: 0; padding: 0; }

     


    Sincerely,

    Carl
    -----
    vine type - content management with standards in mind - vinetype.com
    -----
    Filed under:
  •  12-22-2007, 2:46 PM 37890 in reply to 37854

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    Thank you! Editing the CSS file to include the "display: inline;" part works.

    By the way, I found this out about Markdown:

    If you don't add returns between your list items, you don't get <p> tags. If you do add returns between list items, you do get <p> tags.

    In the Markdown dingus, this:

    First list

    * This first list has only one carriage return between its items. Its items will NOT be wrapped in p tag.
    * This first list has only one carriage return between its items. Its items will NOT be wrapped in p tag.

    Second list

    * This second list has two carriage returns between its items. Its items WILL be wrapped in p tag.

    * This second list has two carriage returns between its items. Its items WILL be wrapped in p tag.

    Will yield this result:

    <p>First list</p>

    <ul>
    <li>This first list has only one carriage return between its items. Its items will NOT be wrapped in p tag.</li>
    <li>This first list has only one carriage return between its items. Its items will NOT be wrapped in p tag.</li>
    </ul>

    <p>Second list</p>

    <ul>
    <li><p>This second list has two carriage returns between its items. Its items WILL be wrapped in p tag.</p></li>
    <li><p>This second list has two carriage returns between its items. Its items WILL be wrapped in p tag.</p></li>
    </ul>

     


    Sincerely,
    Doug Joseph
    Filed under: ,
  •  12-22-2007, 3:01 PM 37891 in reply to 37854

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    By the way, now that you've helped me figure where and how to attack the problem in CSS, I have found that using "display: block;" is better than "inline;" Here's why:

    If my Markdown text has an extra carriage return before each list item, then Markdown seems to assume that should be interpreted as I want some space between each list item in the HTML result. So, it wraps the list item with a <p> tag. The goal would be to see some space between the items. That was happening (which is good), but somehow an undesirable result was also happening whereby the bullets and numbers were showing at the bottom left instead of the top left. By using "display: inline;" it fixed that bullet/number problem, but it took away the space between list items. Using "display: block;" accomplishes both goals.


    Sincerely,
    Doug Joseph
    Filed under: ,
  •  12-22-2007, 3:07 PM 37892 in reply to 37891

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    And, you're not goint to believe this. Once I added that to my CSS file and saw things display correctly, it toggled something, and now it works right even without that in my CSS.

    I just happened to take the new entry back out of my CSS file to see the before/after comparison again, and the problem didn't show up again. Strange!


    Sincerely,
    Doug Joseph
    Filed under:
  •  12-23-2007, 9:02 PM 37930 in reply to 37892

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    I'm glad to hear this is working now.  The car always works when you show it to the mechanic.


    Sincerely,

    Carl
    -----
    vine type - content management with standards in mind - vinetype.com
    -----
    Filed under:
  •  12-23-2007, 9:03 PM 37931 in reply to 37891

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    p is a block element normally.  that's why i thought it was causing the problem.  well, you seem to have figured it out. 


    Sincerely,

    Carl
    -----
    vine type - content management with standards in mind - vinetype.com
    -----
    Filed under:
  •  12-23-2007, 9:04 PM 37932 in reply to 37890

    Re: Help! My template shows <ul>'s and <ol>'s wrong, for some reason.

    interesting - i never knew this or realized how it separated the list element items.  Thanks!
    Sincerely,

    Carl
    -----
    vine type - content management with standards in mind - vinetype.com
    -----
    Filed under: ,
View as RSS news feed in XML