Grow your CSS skills. Land your dream job.

Left side column not displaying in IE6

  • # July 31, 2008 at 2:44 pm

    I’m new to CSS. The entire left column is not appearing in IE6. All is ok in IE7. The site is http://www.blitzpetpros.com and the problem is with tag "Left" I think. Any help appreciated. Here is CSS below.

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

    a:link {
    color: #3a7100;
    }

    a:hover {
    text-decoration: none;
    color: #5E2D1F;
    }

    a:visited {
    color: #3a7100;
    }

    a:active {color: #660000;}

    body {

    background: #ffffff url(‘/images/back_all.gif’) repeat-x;
    font: 13px Arial, Helvetica, sans-serif;
    color: #333333;
    }

    #content
    {
    margin: 0 auto;
    background: #ffffff;
    width: 811px;
    min-height: 900px;

    }
    #back_all
    {
    background: #ffffff url(‘/images/white.gif’);
    }

    #main
    {
    background: #ffffff url(‘/images/white.gif’);
    }

    #header {
    background: #ffffff;
    height: 244px;
    text-align: right;
    }

    #menu
    {
    float: left;
    padding-left: 25px;
    border-left: 7px solid #FFFFFF;
    width: 772px;
    height: 82px;
    background: url(‘/images/header_top.gif’) repeat-x;
    }

    #menu ul {
    list-style: none;

    }

    #menu li {
    display: inline;
    }

    #menu a {
    display: block;
    float: left;
    height: 46px;
    background: #FFFFFF url(‘/images/header_top.gif’) repeat-x;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    padding-top: 35px;
    width: 107px;

    }

    #menu a:hover {
    width: 107px;
    height: 46px;
    text-decoration: underline;
    background: #FFFFFF url(‘/images/header_top_over.gif’) repeat-x;
    }

    #logo {
    background: #ffffff url(‘/images/blitzheader5.jpg’) no-repeat;
    width: 771px;
    height: 98px;
    float: left;
    text-align: right;
    padding-top: 60px;
    padding-right: 40px;
    }

    #logo a {
    text-decoration: none;
    text-transform: lowercase;
    font-style: italic;
    font-size: 22px;
    color: #FFFFFF;
    }
    #logo H2 a
    {
    font-size: 12px;
    }

    #left
    {
    padding: 10px;
    width: 215px;
    padding-right: 1em;
    }

    #left H3
    {
    width: 200px;
    height: 25px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 15px;
    padding-top: 15px;
    text-transform: uppercase;
    color: #ffffff;
    background: url(‘/images/title.gif’) no-repeat;
    }

    #left ul {
    list-style: none;
    border-bottom: 1px solid #629351;
    border-left: 1px solid #629351;
    border-right: 1px solid #629351;
    }

    #left li ul {
    border: 0px;
    margin-left: 10px;
    margin-bottom: 10px;
    }

    #left li li {
    padding: 4px 20px;
    background: url(‘/images/small.gif’) no-repeat left;
    }

    #left a {
    color: #3a7100;
    }
    #left a:visited {
    color: #3a7100;
    }

    #left p
    {
    padding: 10px;
    border-bottom: 1px solid #629351;
    border-left: 1px solid #629351;
    border-right: 1px solid #629351;
    }

    #right
    {
    float: right;
    width: 550px;
    padding-right: 10px;
    padding-top: 10px;
    }

    #right H4
    {
    margin: 0;
    padding: 0px;
    font-size: 12px;
    color: #3a7100;
    }

    #right a
    {
    color: #3a7100;
    text-decoration: none;
    }

    #right p {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    }

    #right h2 {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    color: #660000;
    }
    .date {
    text-align: right;
    color: #808080;
    font-size: 11px;
    background-color: #fff;
    }

    .date a {
    color: #3a7100;
    background-color: #fff;
    }

    #footer {
    height: 47px;
    clear: both;
    padding-top: 20px;
    background: url(‘/images/header_top_over.gif’) repeat-x;
    }

    #footer p {
    margin: 0;
    font-size: 10px;
    text-align: center;
    color: #ffffff;
    }

    #footer a {
    color: #ffffff;
    }

    .formholder fieldset {
    border:3px solid #000000;
    padding:24px;
    }
    .formholder legend {
    color:#000000;
    font-weight:bold;
    font-size:small;
    padding:10px;
    }
    .formholder a {
    color:#669999;
    font-weight:bold;
    font-size:.9em;
    }
    .formholder label {
    display:block;
    font-weight:bold;
    margin-top:12px;
    }

    box
    # July 31, 2008 at 7:22 pm

    The column is appearing in IE6 – just not where you’d like it to. This is the well documented box-model issue that IE6 renders utterly incorrectly. If you reduce the width of the left column it might help. In most browsers 50px + 50px = 100px, that makes sense. But in IE6 50 + 50 = 101! Don’t ask!! So creating a conditional comment to reduce the width of the ‘dropped’ float (or in your case, set of table cells) will often fix the problem.
    The template you have used is very poorly written and is not standards compliant. the site should really be re-written from scratch. But the above should provide an interim solution.

    # July 31, 2008 at 8:26 pm

    The above depends on whether or not you have patched your version of IE6. In patches MS pushed out in the last year or so, they FIXED IE6′s busted box model problem, leaving the other culprit – the hasLayout problem.

    For your column problem, what you need to do is reduce the right and left padding on the 2 columns and your left column will then pull up where you want it to be. You should always avoid adding padding and/or margins to the div itself.

    # July 31, 2008 at 10:55 pm

    Thanks for the quick and helpful responses. The left column is now appearing but the top image is still not. I guess it’s still some padding issue??

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

You must be logged in to reply to this topic.

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