Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    6
    Member #
    28792
    Hi all,

    I'm experiencing some strange padding in my sidebar that's pushing my navigation, an unordered list, to the right. I've got a screenshot below:


    I put a border around my sidebar div so I could try to see what's going on here. The padding on top is supposed to be there, but on the left it's not. Here's my css (it's poorly organized, I know):

    Code:
    body {
    background-color: #e5e9fa;
    margin: 0;
    padding: 0;
    }
    
    p {
    font-family: 'Garamond', serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.025em;
    }
    
    h1 {
    font-family: 'PT Sans Narrow', sans-serif;
    Font-size: 36px;
    letter-spacing: 0.05em;
    color: #091651;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    }
    
    h1 a {
    text-decoration: none;
    color: #091651;
    }
    
    #pageContent {
    width: 550px;
    color: #091651;
    }
    
    #sidebar a {
    display: block;
    color: #091651;
    font-size: 24px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-decoration: none;
    text-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    
    #sidebar a:hover {
    color: #99a4d6;
    }
    
    #sidebar ul li {
    border-top: 1px #091651 solid;
    }
    
    #sidebar ul li:first-child {
    border: none;
    }
    
    #content {
    float: right;
    width: 760px;
    background-image:url('images/logo.png');
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 560px;
    }
    
    #container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
    
    }
    
    #header {
    width: 100%;
    background-color: #e5e9fa;
    height: 144px;
    background-image:url('images/headerbg.png')
    }
    
    #sidebar ul{
    list-style: none;
    display: block;
    width: 200px;
    
    }
    
    #sidebar {
    width: 220px;
    float: left;
    margin: 0 0 0 0;
    padding-top: 70px;
    padding-right: 10px;
    border: 1px #000 solid;
    }
    I've Googled and Googled and I can't seem to figure out what's wrong with it...It's doing it in IE, Firefox, and Chrome, so it's not anything browser specific. I'd really appreciate it if anyone had any ideas. Thanks!!

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I see a couple of things... but can you post the html as well... possibly there is something in that as well

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I see 2 possibilities:

    -Try setting the padding-left to 0
    -Though it may work as shorthand, I've never seen "list-style". I've always seen it as "list-style-type".

    Must apologize, my mad code troubleshooting skills are a bit attenuated by Uncle Jim...Beam
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Aug 2011
    Posts
    6
    Member #
    28792
    Thanks for your help, guys. I tried setting the padding-left to 0 and I also changed "list-style" to "list-style-type," just in case. Neither made any difference, sadly.

    Here's the html (this is a Wordpress theme):

    HTML Code:
    <?php get_header(); ?>
    
    <div id="header">
    
        <center><img src="<?php bloginfo('template_directory'); ?>/images/headerTitle.png" title="" alt="" /></center>
    
    </div>
    
    <div id="container">
    
        <div id="sidebar">
            <ul>
            <?php wp_list_pages('title_li='); ?>
            </ul>
    
        </div>
    
        <div id="content">
            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
            <div id="pageContent">
            <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    
            <?php the_content(); ?>
            </div>
    <?php endwhile; ?>
    <?php endif; ?>
        </div>
    </div>
    
    <?php get_footer(); ?>

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Please post the Outputted code...The output to the browser may show the problem

  7. #6
    Junior Member
    Join Date
    Aug 2011
    Posts
    6
    Member #
    28792
    By outputted code, do you mean what I see when I right click>source code? If so,this is it (leaving out a bunch of header/doctype stuff):

    HTML Code:
    <div id="header">
      
        <center><img src="http://localhost/walkingwithjanewordpress/wp-content/themes/WalkingWithJane/images/headerTitle.png" title="" alt="" /></center>
      
    </div>
      
    <div id="container">
      
        <div id="sidebar">
    
            <ul>
    
            <li class="page_item page-item-4"><a href="http://localhost/walkingwithjanewordpress/?page_id=4" title="About Jane">About Jane</a></li>
    <li class="page_item page-item-2"><a href="http://localhost/walkingwithjanewordpress/?page_id=2" title="Sample Page">Sample Page</a></li>
    <li class="page_item page-item-8"><a href="http://localhost/walkingwithjanewordpress/?page_id=8" title="Store &amp; Donations">Store &#038; Donations</a></li>
            </ul>
      
        </div>
      
        <div id="content">
    
                    <div id="pageContent">
    
            <h1><a href="http://localhost/walkingwithjanewordpress/?p=1" title="Hello world!">Hello world!</a></h1>
      
            <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
            </div>
    
        </div>
    
    </div>
      
    <div id="bottom-container">
    
                <div id="footer">
    
                    <p>Copyright &copy; Walking With Jane 2011 | <a href="mailto:CarissaBroadbent@gmail.com" target="_blank">Admin e-mail</a>.</p>
    
                    <p>Powered by <a href="http://wordpress.org" target="_blank" title="Wordpress.org">WordPress</a></p>
      
                </div>
    
            </div>
    
                </body>
    
    </html>

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    That's the point... Some of stuff you're leaving out.... Could b causing the effect... Can't troubleshoot code problems with only small parts of code... it's all relevant.

  9. #8
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    add list-style-type:none; to
    Code:
    #sidebar a { display: block; color: #091651; font-size: 24px; font-family: 'PT Sans Narrow', sans-serif; text-decoration: none; text-align: center; padding-top: 7px; padding-bottom: 7px; letter-spacing: 1px; text-transform: uppercase;
    list-style-type:none;
    }
    It may fix it
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    If you didn't post the CSS for the li element.... Since you didn't post everything... And the li element is what is shifted... Perhaps a float on the li element would help... But seeing all the code would help

  11. #10
    Junior Member
    Join Date
    Aug 2011
    Posts
    6
    Member #
    28792
    m3n0tu18 - Thanks for the suggestion, but it didn't make any difference, sadly.

    I posted all the CSS, Webzarus. The only thing I left out was this part of the browser source code:
    Code:
    <!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/11">
    
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    
            <title>Walking With Jane</title>
    
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
            <meta name="generator" content="WordPress 3.2.1" /> <!-- leave this for stats please -->
    
    
    
            <link rel="stylesheet" href="http://localhost/walkingwithjanewordpress/wp-content/themes/WalkingWithJane/style.css" type="text/css" media="screen" />
    
    
    
            <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/walkingwithjanewordpress/?feed=rss2" />
    
            <link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/walkingwithjanewordpress/?feed=rss" />
    
            <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/walkingwithjanewordpress/?feed=atom" />
    
            <link rel="pingback" href="http://localhost/walkingwithjanewordpress/xmlrpc.php" />
    
                <link rel='archives' title='August 2011' href='http://localhost/walkingwithjanewordpress/?m=201108' />
    
    
            <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/walkingwithjanewordpress/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/walkingwithjanewordpress/wp-includes/wlwmanifest.xml" />
    <link rel='index' title='Walking With Jane' href='http://localhost/walkingwithjanewordpress' />
    <meta name="generator" content="WordPress 3.2.1" />
        </head>


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com