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 2 of 2
  1. #1
    Registered User
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu & floating divs broke in IE6 - help!!!

    Hello.

    I'm building a site and it works everywhere fine except ie6. Can anyone point me in the direction of how to fix the menu and the floating divs without breaking it in other browsers?

    The pages in question initially are:

    http://www.locofoco-ok.com/proofing/.../teachers.html
    http://www.locofoco-ok.com/proofing/.../teachers.html

    My CSS is below. Cheerz very very much!

    Code:
    html, body, #container
    {
    background-color:#FFFFFF;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    
    
    html>body, html>body #container
    {height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ }
    
    h1{
    font-size:2em;
    color:#FFFFFF;
    background-color:inherit;
    padding:0px;
    margin:0px;
    }
    
    h2{
    font-size:1.3em;
    color:#FFFFFF;
    background-color:inherit;
    padding:0px;
    margin:0px;
    font-weight:bold;
    }
    
    p{
    font-size:1.2em;
    color:#FFFFFF;
    background-color:inherit;
    padding:0px;
    margin:0px;
    }
    
    a:link {color: #FF0000; background-color:inherit; text-decoration:none;}
    a:visited {color:#FF0000; background-color:inherit; text-decoration:none;}
    a:hover {color:#FF0000; background-color:inherit; text-decoration:underline;}
    a:active {color:#FF0000; background-color:inherit; text-decoration:underline;}
    
    
    ul{
    color:#FFFFFF;
    background-color:inherit;
    padding: 0px 0px 0px 20px;
    margin:10px;
    }
    
    li{
    color:#FFFFFF;
    background-color:inherit;
    padding: 5px 0px 5px 0px;
    font-size:1.2em;
    }
    
    
    
    #container{
    position: relative;
    margin: 0px auto;
    width: 800px;
    background-color:#999999;
    padding:0px;
    }
    
    
    #header{
    height:42px;
    background-color:#BFBFBF;
    position: relative;
    padding:0px;
    z-index:50;
    }
    
    #h1div{
    padding: 50px 0px 15px 50px;
    }
    
    #subnav{
    padding:0px;
    margin:0px 0px 10px 0px;
    }
    
    #subnav ul{
    display:inline;
    list-style:none;
    padding:0px;
    margin:0px;
    }
    
    #subnav li{
    padding: 0px 20px 0px 0px;
    display:inline;
    list-style:none;
    margin:0px;
    }
    
    .page{
    padding: 0px 0px 0px 50px;
    margin-bottom:30px;
    position:relative;
    }
    
    .content{
    margin: 0px 350px 0px 0px;
    position:relative;
    width:400px;
    }
    
    .photobox{
    width:300px;
    float:right;
    margin-right:20px;
    }
    
    .photobox .widetop{
    margin-bottom:10px;
    }
    
    .photobox .bottomleft{
    margin-right:10px;
    }
    
    .photobox .tallleft{
    float:left;
    margin-right:10px;
    }
    
    .photobox .righttop{
    margin-bottom:10px;
    }
    
    .photobox .right{
    float:right;
    margin-left:10px;
    }
    
    #header img{
    position:relative;
    left: 7px;
    top: 5px;
    display: block;
    height:34px;
    float:left;
    }
    
    #map{
    clear:both;
    }
    
    #footer{
    background-color:#BFBFBF;
    position: relative;
    padding:5px;
    }
    
    .footertext{
    font-size:0.9em;
    color:#333333;
    background-color:inherit;
    text-align:center;
    line-height:140%;
    
    }
    
    /* Home Page Styling */
    
    #topdiv{
    min-height:131px;
    width:719px;
    margin:20px 0px 0px 0px;
    background:url(images/bubble_top.gif) #FFFFFF top no-repeat;
    }
    
    #topdiv img{
    float:right;
    position:relative;
    top:35px;
    right:0px;
    }
    
    #maindiv{
    height:150px;
    width:719px;
    margin:0px;
    background:url(images/bubble_main.gif) #999999 top no-repeat;
    clear:both;
    }
    
    #bottomdiv{
    width:699px;
    background-color:#FFFFFF;
    margin:15px 0px 0px 0px;
    overflow:visible;
    padding:20px 0px 20px 20px;
    }
    
    
    #facesdiv{
    position:relative;
    float:inherit;
    right:55px;
    top:-15px;
    }
    
    
    .picnugget{
    width:150px;
    float:right;
    margin: 10px 15px 0px 0px;
    position:relative;
    padding:0px;
    }
    
    
    .picnugget img{
    margin: 0px 0px 10px 0px;
    padding:0px;
    }
    
    #hometxt{
    margin:0px 360px 0px 0px;
    }
    
    #clickarrowdiv{
    width:290px;
    float:left;
    color:#FFFFFF;
    background-color:inherit;
    font-size:1.7em;
    margin:40px 0px 0px 20px;
    padding:0px;
    }
    
    #clickarrowdiv img{
    margin-left:10px;
    padding:0px;
    float:right;
    top:-3px;
    position:relative;
    }
    
    .picfloat{
    text-align:center;
    margin:20px;
    }
    
    
    <!--
    /* ================================================================
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/dd_valid.html ;Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    /* common styling */
    .menu {position:absolute; bottom: -5px; right: 10px; width: 500px; margin:0; z-index:100;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:100px; padding: 5px 0px 5px 0px; text-align:center; color:#fff; background:#bfbfbf; font-size:1.1em;line-height:100%; overflow:hidden;}
    .menu ul {padding:0; margin:0; list-style-type: none;}
    .menu ul li {float:left; position:relative; margin:0px; font-size:1.1em;}
    .menu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .menu ul li:hover a {color:#666; background:#fff;}
    .menu ul li:active a {color:#e63c2c; background:#fff;}
    .menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:100px;}
    .menu ul li:hover ul li a.hide { color:#333; background:#fff; margin:0px;}
    .menu ul li:hover ul li:hover a.hide { color:#999; background:#fff;margin:0px;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; color:#999; background:#fff; margin:0px;}
    .menu ul li:hover ul li a:hover {color:#333; background:#fff; }
    .menu ul li:hover ul li a:active {color:#e63c2c; background:#fff;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; top:0;}
    
    .menu ul li:hover ul li a.nopadding {padding: 5px 0px 5px 0px; margin:-5px 0px -5px 0px;}
    -->
    
    
    /* Form Styling
    
    #feedbackpage{
    padding: 0px 50px 0px 50px;
    margin-bottom:30px;
    position:relative;
    }
    
    .leftform{
    width:200px;
    padding:10px;
    float:left;
    }
    
    .rightform{
    padding:10px;
    margin-left:220px;
    }
    
    .bothform{
    width:700px;
    }
    
    .formanswer{
    margin:0px 20px 0px 0px;
    float:left;
    }
    
    .formblank{
    clear:both;
    } */
    
    .feedbackpage{
    padding: 0px 50px 0px 50px;
    margin-bottom:30px;
    position:relative;
    }
    
    .columnwidth{
    width:90px;
    text-align:center;
    }
    
    .table{
    padding:5px;
    font-size:1.3em;
    color:#FFFFFF;
    background-color:inherit;
    margin:0px;
    width:100%;
    }
    
    .disclaimer{
    padding:5px;
    font-size:0.8em;
    color:#FFFFFF;
    background-color:inherit;
    margin:0px;
    line-height:100%;
    }
    
    .boxwidth{
    width:210px;
    }

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I'm not sure where you found that menu.

    Several things in your code look wrong. As it is now, it would only work in browsers that support the li:hover selector. This is not the case for IE6. Perhaps you have forgotten to add some JavaScript.

    It appears that you are using an older version of this menu by Stu Nicholls. I am not familiar with it, but I suggest you go to that page and try to implement it starting all over again. That would probably be better and easier than trying to fix your current one.


  •  

    Posting Permissions

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