Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Left side column not displaying in IE6

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23013
    tammyj
    Member

    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;
    }

    #48820
    LadynRed
    Member

    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.

    #48822
    tammyj
    Member

    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.