Grow your CSS skills. Land your dream job.

Unordered list not lining up with div container

  • # June 16, 2009 at 1:07 pm

    Hi. I’m having an issue with an unordered list (vertical navigation). The problem is that I have a left-border rule going down the side of the navigation and the text doesn’t like up with the rule at the top. I’d attached a screen shot, but the problem is on I.E. 7 which I don’t have on this computer. You can see what it’s doing here http://www.brierscpa.info. It’s in the right-hand sidebar. All of the text drops down leaving a huge gap above it. Here is my css:

    Code:
    @charset “UTF-8″;
    h1 {
    font-size: 20px;
    color: #0B1E52;
    margin-bottom: -8px;
    font-weight: normal;
    letter-spacing: 1.5px;
    }
    .h1body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 25px;
    color: #000000;
    font-weight: normal;
    }
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    }
    h2 {
    font-size: 17px;
    color: #0B1E52;
    margin-bottom: -8px;
    font-weight: normal;
    letter-spacing: 1.5px;
    }
    .h2body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: normal;
    color: #666666;
    }
    #topnav ul {
    width: 560px;
    display: inline;
    }
    #topnav li {
    list-style-type: none;
    height: 27px;
    text-decoration: none;
    font-size: 14.5px;
    text-align: center;
    font-weight: normal;
    display: inline;
    letter-spacing: 1.5px;
    float: left;
    background-image: url(images/topNav1.jpg);
    border-left: 2px solid #0B1E52;
    background-repeat: repeat-x;
    }
    #topnav li a {
    text-decoration: none;
    color: #0B1E52;
    display: block;
    float: left;
    width: 114px;
    padding: 6px 10px 7px 10px;
    }
    #topnav li a:visited {
    }
    #topnav li a:hover {
    color: #0B1E52;
    }
    #topnav li:hover {
    background-image: url(images/topNav2.jpg);
    background-repeat: repeat-x;
    }
    #sidebar1 ul {
    width: 198px;
    display: inline;
    }
    #sidebar1 li {
    display: block;
    font-size: 13px;
    height: 35px;
    width: 198px;
    list-style-type: none;
    }
    #sidebar1 li a {
    display: block;
    text-decoration: none;
    padding-top: 0px;
    }
    #sidebar1 li a:link {
    color: #0B1E52;
    }
    #sidebar1 li a:visited {
    color: #666666;
    }
    #sidebar1 li a:hover {
    color: #666666;
    }
    .copyright {
    text-align: center;
    font-size: 11px;
    color: #999999;
    }
    body {
    background-color: #ffffff;
    }
    .addresstext {
    color: #003153;
    font-size: 13px;
    }
    .profphotobody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    padding: 0;
    margin: 65px 560px 0 30px;
    }
    .taxesphotobody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: #003153;
    font-weight: normal;
    padding: 0;
    margin: 86px 600px 0 30px;
    }
    .servicesphotobody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    padding: 0;
    margin: 80px 30px 0 564px;
    }
    .h2bodysmallital {
    font-size: 11px;
    font-style: italic;
    }
    #sidebarsubtext ul {
    width: 200px;
    display: inline;
    }
    #sidebarsubtext li {
    display: block;
    font-size: 15px;
    height: 32px;
    width: 200px;
    list-style-type: none;
    font-weight: normal;
    text-align: center;
    }
    #sidebarsubtext li a {
    display: block;
    text-decoration: none;
    }
    #sidebarsubtext li a:link {
    color: #0B1E52;
    }
    #sidebarsubtext li a:visited {
    color: #666666;
    }
    #sidebarsubtext li a:hover {
    color: #FCC248;
    }
    a:link {
    color: #003153;
    }
    a:visited {
    color: #999999;
    }
    a:hover {
    color: #FBB829;
    }
    #mainContent ul {
    list-style-type: disc;
    padding-bottom: 10px;
    margin-bottom: 0px;
    }
    #mainContent li {
    font-size: 13px;
    color: #666666;
    height: 20px;
    padding-top: 5px;
    line-height: 17px;
    }
    Code:
    @charset “UTF-8″; body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #0b1e52;
    margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url(images/bcknd.jpg);
    background-repeat: repeat-x;
    } .twoColFixRtHdr #wrapper {
    width: 932px;
    background-color: #FFFFFF;
    margin-left: 14px;
    clear: both;
    padding-top: 0px;
    }
    .twoColFixRtHdr #container {
    width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    background-image: url(images/whiteborder.jpg);
    background-repeat: repeat-x;
    max-height: 100%;
    } .twoColFixRtHdr #logo {
    width: 340px;
    padding-left: 20px;
    height: 40px;
    padding-top: 35px;
    }
    .twoColFixRtHdr #topnav {
    width: 560px;
    float: right;
    padding-top: 74px;
    } .twoColFixRtHdr #header {
    background: transparent;
    height: 115px;
    background-image: url(images/header_bcknd.jpg);
    background-repeat: no-repeat;
    background-position: 438px -18px;
    } .twoColFixRtHdr #homephoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    }
    .twoColFixRtHdr #profphoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    background-image: url(images/professionals.gif);
    background-repeat: no-repeat;
    background-position: 14px 0;
    }
    .twoColFixRtHdr #servicesphoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    background-image: url(images/services.gif);
    background-repeat: no-repeat;
    background-position: 14px 0;
    }
    .twoColFixRtHdr #taxesphoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    background-image: url(images/taxes.jpg);
    background-repeat: no-repeat;
    background-position: 14px 0;
    }
    .twoColFixRtHdr #contactphoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    background-image: url(images/contact.jpg);
    background-repeat: no-repeat;
    background-position: 14px 0;
    }
    .twoColFixRtHdr #privacyphoto {
    clear: both;
    height: 251px;
    padding-left: 14px;
    padding-top: 1px;
    background-image: url(images/flashimages_4.jpg);
    background-repeat: no-repeat;
    background-position: 14px 0;
    }
    .twoColFixRtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse – an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 215px; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0px 10px 0px 15px;
    border-left-style: solid;
    border-left-color: #FCC34D;
    border-left-width: 1px;
    margin-top: 30px;
    max-height: 100%;
    } .twoColFixRtHdr #sidebartext {
    width: 210px;
    height: 100%;
    padding-left: 15px;
    border-left-color: #FBB829;
    border-left-style: solid;
    border-left-width: 1px;
    }
    .twoColFixRtHdr #mainContent {
    margin: 0 255px 0 30px; /* the right margin on this div element creates the column down the right side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 15px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    } .twoColFixRtHdr #footer {
    background:#ffffff;
    width: 932px;
    margin-top: 0px;
    margin-left: 14px;
    clear: both;
    } .twoColFixRtHdr #footer p {
    padding: 13px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    text-align: center;
    border-top-style: solid;
    border-top-width: 1px;
    margin: 0 15px 0 15px;
    } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px;
    }
    .twoColFixRtHdr #cpalogo {
    width: 200px;
    padding-top: 10px;
    text-align: center;
    }
    .twoColFixRtHdr #sidebarsub {
    float: right; /* since this element is floated, a width must be given */
    width: 230px; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0 10px 0px 5px;
    height: 100%;
    clear: both;
    position: relative;
    margin-top: 15px;
    }
    .twoColFixRtHdr #sidebarsubtext {
    width: 200px;
    height: 100%;
    padding-left: 15px;
    border-left-color: #FBB829;
    border-left-style: solid;
    border-left-width: 1px;
    position: relative;
    }

    Any help on this is greatly appreciated. I’ve been noodleing around with this for days!

    Kim

    # June 16, 2009 at 1:50 pm

    You can add this to the top of your stylesheet for now but you should really look at doing a proper css reset.

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    # June 16, 2009 at 2:01 pm
    "apostrophe" wrote:
    You can add this to the top of your stylesheet for now but you should really look at doing a proper css reset.

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    What makes a reset proper or improper?

    # June 16, 2009 at 2:38 pm

    Thanks for answering my post. I tried adding the code below to the style sheet and it didn’t work. Guess I’ll have to look at doing a reset. I’m not familiar with this technique. Any pointers?

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    # June 16, 2009 at 3:36 pm
    Quote:
    What makes a reset proper or improper?

    One that you have complete control over.

    Quote:
    Any pointers?

    The original and still the best http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".