Grow your CSS skills. Land your dream job.

Trouble With Columns (Tried following Screencasts #1,2,3)

  • # June 30, 2008 at 4:09 am

    Hey all, I tried following the first 3 screencasts, but with my own fake mockup to get a feel for doing it myself, but I’m having some problems with the code between Firefox 3 and IE6. I’m on a Mac, so testing cross-browser compatibility is a bit difficult. I’m using that ie4osx (http://www.kronenberg.org/ies4osx/) program.

    At any rate, the columns appear to be fine in FireFox, but they looked jacked like no other in IE6.

    Firefox 3.0
    [img]http://img300.imageshack.us/img300/7868/firefoxli0.jpg[/img]

    ~~

    Internet Explorer 6
    [img]http://img261.imageshack.us/img261/3975/ie6pl5.jpg[/img]

    ~~

    Here is my code.. I’ve commented out the navbar list items because they, too, are looking wonky in IE6 and their spacing is all sorts of discombobulated. This is my real first adventure into CSS layout coding.

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Donate Now

    Mission


    Suspendisse pulvinar interdum metus. Nullam quis enim. Duis augue odio, elementum et, venenatis nec, pellentesque vitae, diam. Maecenas lobortis, mauris vitae sodales lacinia, augue nulla mollis massa, a tincidunt mi risus eu nibh. Nullam eros purus, eleifend vitae, faucibus eget, cursus sed, ipsum. Suspendisse consequat, orci ac convallis pretium, quam dui dignissim sapien, eget malesuada urna libero id massa. Vivamus ipsum arcu, pellentesque vitae, dignissim non, ornare in, orci. Ut tincidunt congue eros. Aliquam a nulla sed enim venenatis venenatis. Suspendisse erat risus, iaculis sed, dapibus ut, suscipit quis, urna.

    Vivamus vitae metus sit amet neque auctor congue. Cras nibh mauris, feugiat sit amet, dignissim ac, lobortis pellentesque, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Fusce ac eros vel metus eleifend accumsan. Aliquam nec odio. Praesent lacinia mauris sit amet felis. Praesent varius blandit urna. Suspendisse libero. Nunc porttitor libero eu nisl. Vivamus posuere nisl a ante. Liquam id erat. Class aptent.


    ~~

    CSS Stylesheet

    Code:
    @charset “UTF-8″;
    /* CSS Document */

    * {
    margin: 0;
    padding: 0;
    }

    body {
    background: url(images/body_bg.jpg) repeat-x top #fdf4d8;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 14px;
    }

    p {
    text-indent: 2em;
    line-height: 22px;
    }

    h1 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    }

    hr {
    margin-top: -4px;
    margin-bottom: 14px;
    }

    div#page-wrap {
    width: 738px;
    margin: 0 auto;
    background-color: #fffdf4;
    }

    .clear {
    clear: both;
    }

    ul#nav {
    height: 161px;
    background: url(images/header_bg.jpg) no-repeat;
    list-style: none;
    padding-left: 20px;
    }

    ul#nav li a {
    display: inline;
    width: 105px;
    margin-right: -10px;
    margin-left: 20px;
    padding: 0px;
    float: left;
    margin-top: 141px;
    color: black;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    ul#nav li a:hover, ul#nav li a:active {
    color: red;
    }

    ul#quicklinks li a {
    font-size: 18px;
    text-decoration: none;
    padding-left: 40px;
    }
    ul#quicklinks li a:visited {
    color: black;
    }

    div#footer {
    background-color: #e5bf97;
    color: white;
    padding: 8px 0px 8px 0px;
    text-align: center;
    }

    div#main {
    padding-bottom: 50px;
    }
    div#main div#right-column {
    float: right;
    width: 420px;
    padding: 20px;
    }

    div#main div#left-column {
    float: left;
    width: 200px;
    }

    img {
    border-style: none;
    }

    ~~

    I tried having a friend help me with it, but it’s driving me crazy. I feel like it’s such an easy fix that takes just a few more snippets of code, but I’ve tried everything that someone with my skill level can do. Just FYI, the page wrap is 738px.

    Please help :oops:

    box
    # June 30, 2008 at 5:55 am

    First of all, get rid of all those <br> tags – use padding or margin for positioning, not mark-up. Secondly, use a strict doctype – otherwise it’ll place IE6 into quirks mode and that’ll just complicate things.

    In order to create two columns you don’t need to use both left AND right floats – just left will do.

    Code:

    some content

    and the css

    Code:
    #left{
    float:left;
    width:250px;
    }
    #right{
    margin-left:255px;
    }

    This is a basic two-column layout, so you should be able to do everything you need to with that.
    If you are setting a width on the right column, the consideration for IE6 is to remember that it can’t count to 100. So when you set a width of 30% on the left and 60% on the right, IE6 sees that as 101% and forces the right column ‘below’ the left – so sometimes you’ll have to modify (in your conditional commented stylesheet) the width of the right column.

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

You must be logged in to reply to this topic.

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