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

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

  •  12-20-2007, 8:25 PM

    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: ,
View Complete Thread