We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24658
    • 11 Posts
    I used the wayfinder chuck on my site to make a dropdownmenu. It look in Firefox but I can’t get it correct in IE 6 and 7.

    This is the link:
    http://www.stipnuenen.nl/

    I used the css menu, here you see a example in firefox:


    Thats looks good, perfect!

    But with IE:


    In Internet Explorer it become a mess, the menu is in the wrong place.

    This is code I used:

    body {
    font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
    font-size: 80%;
    }
    
    /********** Global styles **********/
    .cl {
    clear:both;
    }
    p {
    margin: 0 0 0 0px;
    }
    
    /********** Body  **********/
    #container {
    width: 673px;
    margin: 0px auto;
    background:#ee3f12;
    padding:0px
    }
    
    /********** Top **********/
    #topleft {
    color: #FFFFFF;
    width: 208px;
    height: 140px;
    }
    #topleft h2 {
    text-align: center;
    font-size:2em;
    font-weight: normal;
    color: #fff;
    margin:0;
    padding:0px;
    margin-bottom:40px;
    }
    #topleft h3{
    text-align:center;
    font-style:italic;
    }
    #topright {
    float: right;
    height: 140px;
    width: 452px;
    text-align: right;
    background:#fff;
    
    }
    #topright h4 {
    font-size:2em;
    color: #F01E1E;
    text-align:center;
    }
    
    #gallery {
    width: 673px;
    height:140px;
    border-top:5px solid #fff;
    border-bottom:5px solid #fff;
    }
    #gallery img{
    margin:0;
    padding:0;
    border:0;
    }
    /********** Body **********/
    #content {
    width: 452px;
    float: right;
    background-color: #fff;
    }
    /********** Menu **********/
    .menu {
    position:relative; 
    z-index:1000;
    font-size:90%;
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    width:221px;
    }
    /* hack for IE5.5 */
    * html .menu ul {margin-left:-16px; ma\rgin-left:0;}
    /* position relative so that you can position the sub levels */
    .menu li {
    position:relative;
    }
    
    /* get rid of the table */
    table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
    
    /* style the links */
    .menu a, .menu a:visited {
    display:block; 
    text-decoration:none;
    height:30px;
    line-height:30px;
    width:221px;
    color:#000;
    background:#eeedef;
    text-indent:5px;
    border:1px solid #fff;
    border-width:0 1px 1px 0;
    }
    /* hack for IE5.5 */
    * html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
    /* style the link hover */
    .menu a:hover{
    color:#fff; 
    background:#949e7c;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    top:0;
    left:150px; 
    }
    /* make the second level visible when hover on first level list OR link */
    .menu ul :hover ul{
    visibility:visible;
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ 
    visibility:visible;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { 
    visibility:visible;
    }
    #menu {
    background: #000000;
    border-bottom: 5px solid #FFFFFF;
    height:30px;
    margin-left:5px;
    }
    #menu ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #menu li{
    float:left;
    width:33.3%;
    text-align:center;
    }
    #menu li.last a{
    border-right:none;
    }
    #menu a{
    display:block;
    text-decoration: none;
    color: #0f0b03;
    padding:8px 15px;
    border-right:1px solid #fff;;
    }
    #menu a:hover {
    background: #000000;
    color: #fff;
    }
    #menu li.here a{
    background:#000000;
    color:#fff;
    }
    /********** Main Content **********/
    #pad {
    padding: 12px;
    color: #000;
    background:#c7b793;
    margin-left:5px;
    }
    #pad h3 {
    padding: 4px;
    margin: 4px;
    font-size: 120%;
    font-weight: bold;
    color: #FFFFFF;
    }
    #pad a{
    color: #0f0b03;
    }
    
    /**********  Left Column **********/
    #left {
    width: 213px;
    color: #FFFFFF;
    padding: 0px;
    }
    #left h1 {
    padding: 4px;
    margin: 4px;
    font-size: 120%;
    font-weight: bold;
    color: #fff;
    }
    #left #menuBlock ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #left #menuBlock a{
    display:block;
    text-decoration: none;
    color: #0f0b03;
    padding:8px 15px;
    background: #cf9f25;
    margin-bottom:2px;
    }
    #left #menuBlock li ul li a{
    padding-left:40px;
    }
    #left #menuBlock li ul{
    display:none;
    }
    #left #menuBlock li.here ul{
    display:block;
    }
    #left #menuBlock li.here a, #left #menuBlock a:hover{
    background: #f1bc35;
    color: #fff;
    }
    #left #menuBlock li.here ul li a{
    color: #0f0b03;
    background: #cf9f25;
    }
    #left #menuBlock li.here ul li a:hover{
    background: #f1bc35;
    color: #fff;
    }
    
    /********** Footer **********/
    #footer {
    background-color: #000000;
    padding: 12px;
    width: 649px;
    color:#000;
    font-size: 90%;
    text-align: center;
    clear:both;
    border-top: 5px solid #fff;
    }
    #footer a{
    color:#000;
    }
    #attrib{
    display:none;
    }
    


    And the Chuck:

    <li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    
    [+wf.wrapper+]
    
    </td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    
    </li>
    


    And the page code:

    <div class="menu">
    [!Wayfinder? &startId=`0` &level=`4` &parentRowTpl=`wfParentRow`!]
    </div>
    


    What can I to to make it looking good in IE?, like the firefox version?
      • 24658
      • 11 Posts
      Nobody??? smiley rolleyes . maybe tips or tricks?
        • 8461
        • 205 Posts
        I only took a quick look but are you sure your dimensions are OK, remember IE will expand a box to fit the content rather than overflow it

        Container : 673px
        Assumin the main box (topRight) is 452px and topleft is 208px = 660px
        But menu ul is 221px so if I add topright at 452px = 673px but on the border of the a.link for the menus you have 1px, therefore 675px.

        If you are floating the right box first and the menus follow this in the HTML maybe there is not enough room to fit it in so it sits below the rightbox (Topright).

        Just make sure there is enough room for the container to hold both elements. You could just change the 221px on menu li and the li width itself down to 216px to see if it slots in. Once you sure the dimensions are OK, then you can re-evaluate and work backwards from there making sure there is no IE bugs, e.g double margin bug, but I as I say I did not spend much time, as I think you may need to rework those dimesions first.