SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Sidebar doesn't line up correctly

    On this page, the red sidebar on the left isn't lining up correctly. It looks like I am off by about 5 px. I went back through the math, and I can't seem to figure out what I am missing. It is probably something minor, but any help would be appreciated.

    Here is the CSS...

    Code:
    * {margin : 0; padding : 0;}
    .left {float : left;}
    .right {float : right;}
    .center {margin : 0 auto; text-align : center;}
    .clear {clear : both;}
    a {color : #FFFF00; text-decoration : underline;}
    a:hover, a:focus {text-decoration : none;}
    a:visited {color : #FFFF00;}
    a img {border : 0;}
    img {margin : 3px;}
    ul {list-style : none}
    p {color : #FFCC00;}
    p, blockquote {line-height : 1.5em; margin : 2.0em 0;}
    h1 {color : #FFF; font-family : Arial; font-size : 2.0em; line-height : 4.0em;}
    h2 {color : #6DBDFA; font-size : 1.3em; line-height : 2.0em;}
    h3 {font-size : 1.0em; line-height : 2.0em;}
    .yellow {color : #FFFF00;}
    html, body {background : url("../pics/enchanted_background.gif") repeat 0 0;}
    body {font-size : 100%;}
    #wrap {border-left : 1px solid #000; border-right : 1px solid #000; margin : 0 auto; text-align : left; width : 800px;}
    #keywords {color : #FFF; font-size : 0.8em; height : 4em; padding-bottom : 0.4em; text-align : center; width : 800px;}
    #header {background-color : #000; height : 130px; text-align : center; width : 800px;}
    #background {background : url("../pics/background_body.gif") repeat-y 0 0;}
    #sidebar {clear : left; float : left; margin-bottom : 80px; width : 150px;}
    #content {color : #FFF; float : right; font-family : Arial; font-size : 0.9em; margin-bottom : 80px; padding : 10px; text-align : left; width : 630px;}
    #footer {color : #FFF; font-family : Arial; font-size : 0.7em; margin : 0 0 0 150px; padding : 10px; text-align : center; width : 630px;}
    #footer p {line-height : 1.3em;}
    #sidebar ul {list-style : none; margin : 0; padding : 0;}
    #sidebar ul li {margin : 0; padding : 0;}
    li.home a {background : url("../pics/sidebar/home.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.home a:hover, li.home a:focus, li.home a.focus {background : url("../pics/sidebar/home.gif") 0 0;}
    li.aboutus a {background : url("../pics/sidebar/aboutus.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.aboutus a:hover, li.aboutus a:focus, li.aboutus a.focus {background : url("../pics/sidebar/aboutus.gif") 0 0;}
    li.contactus a {background : url("../pics/sidebar/contactus.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.contactus a:hover, li.contactus a:focus, li.contactus a.focus {background : url("../pics/sidebar/contactus.gif") 0 0;}
    li.orderform a {background : url("../pics/sidebar/orderform.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.orderform a:hover, li.orderform a:focus, li.orderform a.focus {background : url("../pics/sidebar/orderform.gif") 0 0;}
    li.costumes a {background : url("../pics/sidebar/costumes.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.costumes a:hover, li.costumes a:focus, li.costumes a.focus {background : url("../pics/sidebar/costumes.gif") 0 0;}
    li.gallery a {background : url("../pics/sidebar/gallery.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.gallery a:hover, li.gallery a:focus, li.gallery a.focus {background : url("../pics/sidebar/gallery.gif") 0 0;}
    li.quotes a {background : url("../pics/sidebar/quotes.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.quotes a:hover, li.quotes a:focus, li.quotes a.focus {background : url("../pics/sidebar/quotes.gif") 0 0;}
    li.links a {background : url("../pics/sidebar/links.gif") 0 -50px; display : block; width : 150px; height : 50px; text-indent : -999999px; overflow : hidden;}
    li.links a:hover, li.links a:focus, li.links a.focus {background : url("../pics/sidebar/links.gif") 0 0;}
    blockquote {background-color : #0F0F0F; color : #00FF00; font-weight : bold; margin : 0.8em 0; padding : 0.5em;}
    td.headline {text-align : center;}
    #footer a {color : #FFF; text-decoration : underline;}
    #footer a:hover, #footer a:focus {text-decoration : none;}
    #footer a:visited {color : #FFF;}
    #list_costumes li {float : left; min-height : 4.0em; padding : 10px; text-align : center; width : 100px;}
    table.gallery {border : 0; padding : 10px 0;}
    table.gallery tr.headings td {text-align : center;}
    table.gallery img {border : 1px solid #FFF;}
    /* Forms */
    .form {clear : both; background-color : #000; padding : 10px; margin : 10px 0;}
    .form fieldset {margin : 15px 0; padding : 10px;}
    .form legend {padding : 0 0 10px 0; margin : 0;}
    .form #formrow, .form .formrow {clear : both; padding : 20px 0;}
    .form label {float : left; width : 300px; cursor : pointer; cursor : hand;}
    .form label.required {float : left; width : 300px; cursor : pointer; cursor : hand; font-weight : bold;}
    span.formrc, .formrc {float : right; text-align : left; width : 275px;}
    .form div.spacer {clear : both;}
    ul.formlist {list-style : none; margin : 0; padding : 0;}
    span.error {color : #FF0000; font-weight : bold;}
    fieldset#Date, fieldset#Time {border : 0; margin : 0; padding : 0;}
    Any help would be much appreciated!

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Germany, Hannover
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I supect the img "img{margin:3px}" is to blame.
    If you put this line in: "#header img {margin:0;} everythings fine again (at least in firefox)
    HTH Roland

  3. #3
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked perfectly. Thanks for the assistance.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •