Any CSS Wizards ?

  • madderhatter

    (@madderhatter)


    18 years, 3 months ago

    Hey all. Well it wouldn’t take much of a wizard to know more about CSS than me. My style.css is hacked together from a few and everything is working fine except one thing – the unordered list function. Whenever I make a post and use any of the list functions the only thing it does is run the “should be listed” lines together in one long one.

    I’ve fought with this for two days, comparing other style.css sheets to mine trying to find that key item that I’m missing. If I switch to another theme the lists work fine. I’ve tried putting the “list-style-type: disc;” about everywhere I could find but no-go. I hope this isn’t too long, but here’s the CSS:


    /* Structure */

    body {
    color: #000;
    font-family: "Lucida Grande", "Trebuchet Ms", Geneva, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;

    }

    #container {
    width: 90%;
    /*width: 750px;*/
    margin: 10px;
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px;
    padding-right: 12px;
    /*border: 1px solid #eee;
    */

    }

    html>body #header {
    padding: 5px;
    font: bold 15px Century Gothic, Arial, 'Trebuchet Ms', Verdana, Helvetica, sans-serif;
    padding-top: 0px;
    margin-top: -20px;
    border-bottom: 1px dotted #ccc;
    text-align: center;

    }

    #header {
    padding: 5px;
    font: 20px 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
    font-weight: bolder;
    padding-top: 0px;
    margin-top: 30px;
    border-bottom: 1px dotted #ccc;
    text-align: center;
    }

    #description {
    margin-top: -15px;
    font: 12px Century Gothic, Arial, 'Verdana', Helvetica, sans-serif;
    color: #444;
    }

    #content {
    padding: 20px 20px 5px 2px;
    }

    #sidebar {
    float: right;
    width: 150px;
    width: 160px;
    width: 150px;
    margin-bottom: 20px;
    padding: 10px;
    padding-right: 2px;
    color: #808080;
    font-weight: bold;
    list-style-type: none;
    }

    #sidebar p {
    font: 11px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 5px 0 2px 10px;
    }

    #sidebar ul li {
    font: 11px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 5px 0 2px 0;
    margin-left: -30px;
    list-style-type: none;
    }

    #linkcat-1 {
    font: 14px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 -10px -15px;
    padding-bottom: 5px;
    font-weight: normal;
    }

    #sidebar>#linkcat-1 {
    font: 14px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 0px 0px;
    padding-bottom: 5px;
    font-weight: normal;
    }

    #sidebar> #linkcat-1 ul li {
    margin-left: -30px;
    margin-top: 5px;
    }

    #linkcat-1 ul li {
    margin-left: -15px;
    margin-top: -5px;
    }

    #linkcat-1 ul {
    margin-top: 10px;
    }

    #sidebar> #h5problemchild {
    margin-left: 0px;
    }

    #h5problemchild {
    margin-left: 15px;
    }

    .footer {
    clear: both;
    border-top: 1px solid #ddd;
    font-size: 11px;
    margin: 15px 0 0 0;
    text-align: center;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    }

    /* Links */

    a:link {
    color: #9933CC; text-decoration: none;
    }

    a img {
    margin: 5px;
    padding: 5px;
    border: thin dashed Purple;
    }

    a:visited {
    color: #9933CC; text-decoration: none;
    }

    a:hover {
    color: #9933CC;
    }

    /* H Styles */

    h1 {
    font: 28px 'Trebuchet MS', Arial, Times New Roman;
    font-weight : bolder;
    }

    h2 {
    border-bottom: 1px dotted #ccc;
    font: 18px "Lucida Grande", "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 10px 0px;
    padding-bottom: 5px;
    }

    li h2 {
    border-bottom: 1px dotted #ccc;
    font: 14px "Lucida Grande", "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 10px 0px;
    padding-bottom: 5px;
    }

    #sidebar> li h2 {
    border-bottom: 1px dotted #ccc;
    font: 14px "Lucida Grande", "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 10px 0px;
    padding-bottom: 5px;
    }

    h3 {
    border-bottom: 1px dotted #ccc;
    font-family: 'Century Gothic', "Trebuchet Ms", Arial, Helvetica, sans-serif;
    margin-top: 0;
    font-size: 18px;
    }

    h4 {
    font: 16px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 10px 0px;
    padding-bottom: 5px;
    font-weight: bold;
    }

    h5 {
    border-bottom: 1px dotted #ccc;
    font: 14px "Trebuchet Ms", Arial, "Times New Roman", Times, serif;
    margin: 20px 0 -10px 0px;
    padding-bottom: 5px;

    }

    /* Text Styles */

    p, li, .feedback {
    letter-spacing: 0px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    font-size:12px;
    font-family:Trebuchet Ms, Arial, Helvetica, sans-serif;

    }

    acronym, abbr {
    border-bottom: 1px dashed #333;
    }

    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    }

    #quote {
    background-color: #ccc;
    padding: 5px;
    margin: -5px 5px 10px 5px;
    font-size: 10px;
    font-family: Geneva, Arial, Verdana;
    }

    /* Post & Meta Styles */

    .post {
    padding: 5px 0 5px 0;
    }

    .storytitle {
    margin: 0;
    }

    .storytitle a {
    text-decoration: dashed;
    }

    .storycontent a:link, .storycontent a:visited {
    color: #9933CC;

    }

    .storycontent a:hover {
    color: #9933CC;
    }

    .meta a:link, .meta a:visited {
    color: #9933CC;
    }

    .meta a:hover {
    color: #9933CC;
    }

    .meta {
    font-size: 11px;
    padding-bottom: 5px;
    font-family: Geneva, Arial, Verdana;
    }

    .meta li, ul.post-meta li {
    display: inline;
    }

    .meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .meta, .meta a {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    }

    .number a:link {
    color: #ccc;

    }

    .number a:visited {
    color: #ccc
    }

    /* Other Styles */

    div>#searchform {
    padding-left: 5px;
    padding-top: 20px;
    }

    div>#searchform input {
    border: 1px solid #9933CC;
    }

    #searchform {
    padding-left: 5px;
    padding-top: 0px;
    }

    .feedback {
    color: #ccc;
    text-align: right;
    }

    /* Comment Styles */

    #comments {
    margin-top: 40px;
    }

    #respond {
    margin-top: 30px;
    }

    #commentform textarea {
    width: 60%;
    }

    div>.commentlist {
    margin-left: -40px;
    }

    .commentlist {
    margin-left: 0px;
    }

    #commentlist li ul {
    font-size: 110%;
    list-style-type: none;
    }

    ol#comments li p {
    font-size: 100%;
    }

    #header a:link {
    text-decoration: none;
    color: #9933cc
    }

    #header a:visited {
    text-decoration: none;
    color: #9933cc
    }

    /* Begin Images */
    p img {
    padding: 0;
    max-width: 100%;
    }

    /* Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }
    /* End Images */

    I hope someone can help a fella out and point out the obvious.

    Thanks in advance for any help folks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • whooami

    (@whooami)

    18 years, 3 months ago

    an actual page to look at would be helpful.

    I often wonder why ppl ask these sorts of questions and leave off the url — tends to make me suspicious (im a suspicious person, I guess).

    Joshua Sigar

    (@alphaoide)

    18 years, 3 months ago

    Are you saying the list items are listed horizontally instead of vertically?

    You may want to try to delete the line display: inline; in the following separate two sections of your CSS code.

    .meta li, ul.post-meta li {
    display: inline;
    }

    .meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    And yeah, for this kind of question, I would require the link to the problematic site.

    Thread Starter madderhatter

    (@madderhatter)

    18 years, 3 months ago

    Well the reason I didn’t put up a link was because I wasn’t going to put any crap looking post on my site, but I did anyway.

    I put up a post with asterisks – where those asterisks are is where a new bulleted line should begin. But as you can see they just go in one continuous sentence.

    Thanks for the helpful suggestion, alpha – I’ll look and see if that’s in there. Here’s the link to the post:

    Problem fixed, link removed.

    Thread Starter madderhatter

    (@madderhatter)

    18 years, 3 months ago

    As a note, alpha, that exact code is already in the css.

    Truth

    (@truth)

    18 years, 3 months ago

    I second what alphaoide mentioned

    Delete this from your CSS and it should work 🙂

    .meta li, ul.post-meta li {
    display: inline;
    }

    Thread Starter madderhatter

    (@madderhatter)

    18 years, 3 months ago

    Tada ! That did it folks ! Works like a champ now – thanks so much alpha and Truth for your insightful input. Now I can quit fighting with the damn thing :o)

    Truth

    (@truth)

    18 years, 3 months ago

    welcome 😀

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Any CSS Wizards ?’ is closed to new replies.