CSS Confusion

  • Jordan

    (@wolf530)


    21 years, 7 months ago

    For starts, check out my page at:
    http://jordan.kruegerplace.com
    In the “Test Blog” (top entry), you’ll see that the font is all messed up around the “Filed under” area. I’ve been trying to decipher why in the world the text isn’t all uniform in this section. I’ve included my index file, as well as my CSS file below. Any help would be much appreciated. (Basically: I just want it the text from “Filed under” to “See my location” to be all the same size.)
    <?php
    /* Don't remove this line. */
    require('./wp-blog-header.php');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/1">
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    <style type="text/css" media="screen">
    @import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
    </style>
    <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
    </head>
    <body>
    <div id="rap">
    <h1 id="header">"></h1>
    <div id="content">
    <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
    <?php the_date('','<h2>','</h2>'); ?>
    <div class="post">
    <h3 class="storytitle" id="post-<?php the_ID(); ?>">" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></h3>
    <div class="meta">Filed under: <?php the_category() ?> — "><?php the_author_firstname(); ?> @ <?php the_time() ?><br>
    ">See my location</div>
    <div class="storycontent">
    <?php the_content(); ?>
    </div>
    <div class="feedback">
    <?php wp_link_pages(); ?>
    <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
    </div>
    <!--
    <?php trackback_rdf(); ?>
    -->
    <?php include(ABSPATH . 'wp-comments.php'); ?>
    </div>
    <?php endforeach; else: ?>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
    <?php endif; ?>
    </div>
    <div id="menu">

      <?php get_links_list(); ?>
      <li id="categories"><?php _e('Categories:'); ?>
      <?php wp_list_cats(); ?>

    <li id="search">
    <label for="s"><?php _e('Search:'); ?></label>
    <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
    <div>
    <input type="text" name="s" id="s" size="15" />

    <input type="submit" name="submit" value="<?php _e('Search'); ?>" />
    </div>
    </form>

    <li id="archives"><?php _e('Archives:'); ?>

      <?php wp_get_archives('type=monthly'); ?>

    <li id="calendar">
    <?php get_calendar(); ?>

    <li id="other"><?php _e('Other:'); ?>

    <li id="meta"><?php _e('Meta:'); ?>

    </div>
    </div>
    <p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by WordPress"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite>
    </body>
    </html>
    `/*
    Blue Theme by Brian Tan ||http://btan.sonicage.com
    Modified August 12, 2004
    based on:
    Golf Theme by Alex King || http://alexking.org
    */
    a {
    color: #142A3B;
    }
    a:visited {
    color: #363;
    }
    a:hover {
    color: White;
    }
    a[href=”javascript:history.go(-1)”] {
    display: none !important;
    visibility: hidden !important;
    }
    acronym, abbr {
    border-bottom: 1px dashed #333;
    }
    acronym, abbr, span.caps {
    cursor: help;
    letter-spacing: .07em;
    }
    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    }
    body {
    background: #4C7899;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    margin: 0;
    border: 0;
    }
    h2 {
    font-size: .95em;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    border-bottom: 1px dotted #fff;
    color: #fff;
    margin: 15px 0 7px 0;
    padding-bottom: 2px;
    }
    h3 {
    font-size: .75em;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    margin-top: 5px;
    }
    p, li, .feedback {
    color: #fff;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: .65em;
    }
    cite {
    font-style: normal;
    font-size: 90%;
    }
    #content {
    float: left;
    margin: 10px 2px 0 10px;
    padding-bottom: 30px;
    width: 470px;
    }
    #content div a, #content p a {
    color: #fff;
    }
    #content div a:hover, #content p a:hover {
    color: #cfc;
    }
    #content .storycontent a {
    color: #000;
    }
    #content .storycontent a:hover {
    color: #333;
    }
    #commentform input {
    background-color: #fff;
    border: 1px solid #696;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: 1em;
    }
    #commentform textarea {
    background-color: #fff;
    border: 1px solid #696;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: 1em;
    width: 400px;
    }
    ol#comments li p {
    font-size: 1em;
    margin: 0px;
    margin-bottom: 7px;
    text-align: justify;
    }
    ol#comments li p cite a {
    color: #fff;
    }
    #header {
    letter-spacing: 0.2em;
    background: #285577;
    background-image: url(wp-images/header.jpg);
    background-repeat: no-repeat;
    height: 270px;
    width: 700px;
    margin: 0px;
    padding: 0px;
    border: 1px solid #285577;
    border-bottom: 3px solid #285577;
    border-top: 0px;
    }
    #header a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    position: relative;
    top: 200px;
    left: 25px;
    }
    #header a:hover {
    text-decoration: underline;
    }
    #menu {
    background: #B1D3EC;
    border: 1px solid #0066B2;
    border-top: 0px;
    padding: 20px 0 30px 5px;
    float: right;
    width: 180px;
    }
    #menu form {
    margin: 0;
    }
    #menu input {
    background-color: #fff;
    border: 1px solid #0066B2;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: .9em;
    width: 80px;
    }
    #menu input[type=”submit”] {
    background-color: #e8e8e8;
    border: 1px solid #696;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: .9em;
    width: 50px;
    }
    #menu ul {
    color: #030;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding-left: 5px;
    }
    #menu ul li {
    background-image: url(wp-images/arrow.gif);
    background-repeat: no-repeat;
    color: #000;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-weight: bold;
    font-size: .7em;
    margin-top: 15px;
    padding-bottom: 0px;
    padding-left: 24px;
    }
    #menu ul ul {
    font-weight: normal;
    line-height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    #menu ul ul li {
    background: none;
    font-family: verdana, arial, helvetica, geneva, sans-serif;
    font-size: .9em;
    font-weight: normal;
    margin: 0;
    margin-top: 5px;
    padding: 0;
    border: 0;
    }
    #menu ul ul li a {
    color: #000;
    height: 13px;
    }
    #menu ul ul li a:hover {
    color: #7C94A5;
    }
    #rap {
    margin: auto;
    width: 702px;
    }
    /* uncomment if you use the sample images
    #styleswitcher li {
    float: left;
    margin: 0 5px 5px 0;
    padding-left: 5px;
    }
    #styleswitcher img {
    border: 1px solid #999;
    margin: 5px 10px 0 0;
    }
    */
    .credit {
    clear: both;
    color: #fff;
    font-size: .65em;
    margin: 10px 0 0 0;
    padding: 3px;
    text-align: center;
    }
    .credit a:link, .credit a:visited, .credit a:hover {
    color: #fff;
    }
    .feedback {
    color: #fff;
    text-align: right;
    }
    .feedback a, .feedback a:active, .feedback a:link, .feedback a:visited {
    color: #fff;
    }
    .legal {
    color: Navy;
    font-size: .65em;
    text-align: right;
    margin: 10px;
    margin-top: 30px;
    }
    .meta, .meta a {
    color: #fff;
    font-size: .75em;
    font-weight: normal;
    letter-spacing: 0;
    margin-bottom: 5px;
    }
    .paged_links a {
    color: #fff;
    font-weight: bold;
    }
    .post-categories {
    display: inline;
    margin: 0;
    padding: 0;
    }
    .post-categories li {
    display: inline;
    margin-left: 0 3px 0 0;
    padding: 0;
    }
    .post-categories li a {
    font-size: 1.5

Viewing 2 replies - 1 through 2 (of 2 total)
  • Mike

    (@mike)

    21 years, 7 months ago

    The problem lies with this code:

    <div class="meta">Filed under:
    <ul class="post-categories">

    • General

      • See that unordered list? That is messing up the font because it is trumping the style ‘meta.’ You can do one of two things: 1. alter the output of the_category() to not be a list (don’t think it is by default 2. change the styling of .post-categories to match that of meta.

    Thread Starter Jordan

    (@wolf530)

    21 years, 7 months ago

    Many, /many/ thanks for your help 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Confusion’ is closed to new replies.