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
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Column CSS and Column 2 Drops down half the page in IE6

    Im currently working on a community website which up until yesterday was working fine.

    Now I'm finding out in IE6 the vertical alignment of column 2 (content) drops down to the middle of the page rather than staying at the top. It appears to be working fine in IE7 for some reason.

    http://www.mountisacommunityhelicopter.com.au

    To be fair a lot of this is cut and paste code as I'm still learning and dont have a great deal of experience in this. So any help would be greatly appreciated.


    body {
    margin: 0;
    padding: 0;
    background: #E5E5E5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    }

    blockquote {
    font-style: italic;
    }

    a {
    color: #135293;
    }

    a:hover {
    text-decoration: none;
    }

    .title1 {
    margin: 0;
    padding: 10px 0;
    background: url(images/img07.gif) repeat-x left bottom;
    font-weight: normal;
    font-size: 129%;
    color: #FFFFFF;
    }

    .title2 {
    margin: 0;
    padding: 10px 0;
    background: url(images/img09.gif) repeat-x left bottom;
    font-size: 227%;
    font-weight: normal;
    color: #135293;
    }

    .title3 {
    margin: 0;
    padding: 10px 0;
    background: url(images/img11.gif) repeat-x left bottom;
    font-size: 129%;
    font-weight: normal;
    color: #FFFFFF;
    }

    .boxed {
    padding: 5px 30px 20px 30px;
    }

    .boxed p, .boxed ul, .boxed ol {
    line-height: 180%;
    }

    .orange {
    margin: 20px 30px;
    background: #FF9523 url(images/img10.gif) repeat-x;
    color: #FFFFFF;
    }

    .orange a {
    color: #FFFFFF;
    }

    .col-one {
    float: left;
    width: 300px;
    }

    .col-two {
    float: right;
    width: 300px;
    }

    /* Page */

    #page {
    width: 980px;
    margin: 0 auto;
    background: #FFFFFF url(images/img01.gif) repeat-y;
    }

    /* Sidebar */

    #sidebar {
    float: left;
    width: 240px;
    }

    /* Logo */

    #logo {
    height: 220px;
    background: #FFFFFF url(images/img02.gif) repeat-y right top;
    }

    #logo h1, #logo h2 {
    margin: 0;
    text-transform: lowercase;
    text-align: center;
    font-weight: normal;
    font-style: italic;
    color: #9C9C9C;
    }

    #logo h1 {
    padding: 100px 0 0 0;
    background: url(images/img03.gif) no-repeat center center;
    font-size: 36px;
    }

    #logo h2 {
    font-size: 14px;
    }

    #logo a {
    color: #009900;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    }

    /* Menu */

    #menu {
    padding: 20px;
    background: #85C329 url(images/img04.gif) repeat-x;
    }

    #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #menu li {
    padding: 10px 0;
    background: url(images/img05.gif) repeat-x;
    }

    #menu li.first {
    background: none;
    }

    #menu a {
    text-decoration: none;
    font-size: 129%;
    color: #FFFFFF;
    }

    #menu a:hover {
    text-decoration: underline;
    }

    /* Login */

    #login {
    padding: 20px;
    background: url(images/img06.gif) repeat-x;
    }

    #login form {
    margin: 0;
    padding: 20px 0 0 0;
    }

    #login fieldset {
    margin: 0;
    padding: 0;
    border: none;
    }

    #login label {
    color: #FFFFFF;
    }

    #inputtext1, #inputtext2 {
    width: 194px;
    margin-bottom: .5em;
    font: bold 100% Georgia, "Times New Roman", Times, serif;
    color: #666666;
    }

    #inputsubmit1 {
    margin-bottom: .5em;
    font: bold 100% Georgia, "Times New Roman", Times, serif;
    color: #666666;
    }

    #login a {
    color: #FFFFFF;
    }

    /* Content */

    #content {
    float: right;
    width: 740px;
    }

    /* Footer */

    #footer {
    width: 980px;
    height: 120px;
    margin: 0 auto;
    background: url(images/img12.gif) repeat-x;
    }

    #footer p {
    margin: 0;
    font-size: 85%;
    }

    #links {
    float: left;
    width: 220px;
    height: 45px;
    padding: 35px 0 0 20px;
    background: url(images/img13.gif) repeat-x;
    }

    #links a {
    color: #FFFFFF;
    }

    #legal {
    float: right;
    width: 720px;
    height: 45px;
    padding: 35px 0 0 20px;
    }

    many thanks again for any help.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    There might be an easier way to do this, but this fixes the problem nicely in my local machine.
    IE Conditional Comments can be used to serve a different style rule to IE Browsers. There are several variations, but use this one to target IE6 and lower.
    Code:
    <style type="text/css">
    <!--
    .style2 {font-size: 14px}
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    a:active {
        text-decoration: none;
    }
    -->
    </style>
     <!--[if lte IE 6]>
    <style type="text/css">
    #sidebar {
    width: 236px;
    }
    </style>
    <![endif]-->
     
    </head><body>
    I think the width of the sidebar was the culprit.

    In future, please use the bbcode "code" tag to separate out your code from the posting. It automagically shortens the listing for you (and us). Thanks.
    Last edited by jlhaslip; 09-17-2007 at 12:06 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your assistance. I shall try that tomorrow

    And my apologies .. I didnt think ahead of content display


  •  

    Posting Permissions

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