Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: CSS Issues

  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Issues

    I am having an issue with layout here. I am trying to get a series of blocks of text to be in a 2 column format using only CSS, can't use tables due to CMS issues. The problem is that I can't get the boxes to touch. They are line up with the top of the box rather than the bottom of the box below. Any idea?

    --Seth

    CSS (HTML attached)
    ===================================
    .sitemap-table {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 15px 0px 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
    }
    .sitemap-table TD {
    VERTICAL-ALIGN: top;
    }
    .sitemap-container {
    PADDING-RIGHT: 0px; display:inline; BACKGROUND: url(bg-industry-table.gif) repeat-y 0px 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 10px; VERTICAL-ALIGN: top; WIDTH: 205px; PADDING-TOP: 0px; POSITION: relative;
    }
    .sitemap-container UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: url(../images/accent-list-arrow.gif); PADDING-BOTTOM: 0px; MARGIN: 10px 0px 15px 25px; COLOR: #2a568f; PADDING-TOP: 0px
    }
    .sitemap-container UL LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: url(../images/accent-list-arrow.gif); PADDING-BOTTOM: 0px; MARGIN: 0px 0px 8px; PADDING-TOP: 0px
    }
    .sitemap-container H3 {
    FONT-WEIGHT: bold; FONT-SIZE: 13px; BACKGROUND: url(../images/aboutInternap/bg-industry.gif) #7c2230 no-repeat 0px 0px; MARGIN: 0px; COLOR: #fff; TEXT-ALIGN: center
    }
    .sitemap-container .sitemapBottom {
    BORDER-RIGHT: #000 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 0px solid; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: url(bg-locationsTable-bottom.gif) repeat-x 0px 100%; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 0px solid; WIDTH: 205px; BOTTOM: -5px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 0px solid; POSITION: absolute; TEXT-ALIGN: center
    }
    .sitemap-container .sitemapBottom SPAN {
    DISPLAY: none
    }
    Attached Files Attached Files

  • #2
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? I really need help on this... I am running out of things to try.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you have a lot of stuff going on on that page that I didn't want to weed through but try this out and see if you can work with it:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>2-column boxes</title>
    <style type="text/css">
    #list_container {
    width: 500px;
    border: 2px solid #000;
    padding: 0;
    margin: 0;
    }
    #list_container ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #list_container ul {
    width: 200px;
    }
    #list_container li {
    width: 180px;
    height: 180px;
    border: 1px solid #66f;
    display: block;
    }
    ul.left{
    float: left;
    }
    ul.right {
    float: right;
    }
    ul.left li {
    float: left;
    clear: left;
    }
    ul.right li {
    float: right;
    clear: right;
    }
    #list_container .foot {
    clear: both;
    width: 100%;
    height: 0px;
    }
    * html #list_container .foot {
    margin-top: -20px;
    }
    </style>
    </head>
    <body>
    <div id="list_container">
    <ul class="left">
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <ul class="right">
    <li></li>
    <li></li>
    </ul>
    <div class="foot">
    </div>
    </body>
    </html>
    Edit: fixed an IE bug
    Last edited by harbingerOTV; 08-17-2005 at 01:40 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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