CSS Forum

**doodark** · 02-28-2009, 05:57 PM

Hello there,

I have created a pop-out menu using fireworks cs3 and added it to my website and what a surprise-when i preview in IE there is a problem, the menu/sidebar shifts down a good 30 px. The menu itself seems to work fine, which is very surprising-and a massive relief.

Here is the site-work in progress of course!: http://sarah-hammond.co.uk/pvca_try/index.html

I have been reading that a lot of people are having similar problems with pop-outs causing whitespace in internet explorer, and have tried to insert bug-fixes i have found into my css file with no luck. One fix i came across is already in the original code-which is very strange!:

Code:

}
#MMMenu li:hover, #menu li.hover {  
 position: static;  
}

I'm sure it shouldnt be this difficult! and I would be eternally grateful if someone could help me out with this same goes if anyone could just destroy internet explorer for good-its the bain of my life!

Hers is the css-its a big'un sorry!:

Code:

#FWTableContainer210959395 {
    /* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
    position:relative;
    margin:0px;
    width:161px;
    height:336px;
    text-align:left;
}

#MMMenuContainer0228170342_0 {
    /* This ID is related to the master menu div for menu MMMenuContainer0228170342_0 and contains the important positioning information for the menu as a whole */
    position:absolute;
    left:161px;
    top:74px;
    visibility:hidden;
    z-index:300;
}

#MMMenu0228170342_0 {
    /* This class defines things about menu MMMenu0228170342_0's div. */
    position:absolute;
    left:0px;
    top:0px;
    visibility:hidden;
    background-color:transparent;
    width:181px;
    height:208px;
    float: left;
}

.MMMIFVStyleMMMenu0228170342_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228170342_0 */
    border-top:0px solid #77c60f;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:181px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:171px;
    height:16px;
}

.MMMIVStyleMMMenu0228170342_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228170342_0 */
    border-top:0px;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:181px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:171px;
    height:16px;
}

#MMMenu0228170342_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:0px;
}

#MMMenu0228170342_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:26px;
}

#MMMenu0228170342_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:52px;
}

#MMMenu0228170342_0_Item_3 {
/* Unique ID for item 3 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:78px;
}

#MMMenu0228170342_0_Item_4 {
/* Unique ID for item 4 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:104px;
}

#MMMenu0228170342_0_Item_5 {
/* Unique ID for item 5 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:130px;
}

#MMMenu0228170342_0_Item_6 {
/* Unique ID for item 6 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:156px;
}

#MMMenu0228170342_0_Item_7 {
/* Unique ID for item 7 of menu MMMenu0228170342_0 so we can set its position */
    left:0px;
    top:182px;
}

#MMMenuContainer0228170342_0 img {
/* needed for Mozilla/Camino/Netscape */
    border:0px;
}

#MMMenuContainer0228170342_0 a {
/* Controls the general apperance for menu MMMenuContainer0228170342_0's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    text-align:left;
    vertical-align:middle;
    padding:5px;
    background-color:#88cf3c;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}

#MMMenuContainer0228170342_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0228170342_0 */
    color:#ffffff;
    background-color:#57be1a;
}
#MMMenuContainer0228171256_1 {
    /* This ID is related to the master menu div for menu MMMenuContainer0228171256_1 and contains the important positioning information for the menu as a whole */
    position:absolute;
    left:161px;
    top:112px;
    visibility:hidden;
    z-index:300;
    float: left;
    height: 100%;
}

#MMMenu0228171256_1 {
/* This class defines things about menu MMMenu0228171256_1's div. */
    position:absolute;
    left:0px;
    top:0px;
    visibility:hidden;
    background-color:transparent;
    width:161px;
    height:104px;
}

.MMMIFVStyleMMMenu0228171256_1 {
    /* This class determines the general characteristics of the menu items in menu MMMenu0228171256_1 */
    border-top:0px solid #77c60f;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
    float: left;
}

.MMMIVStyleMMMenu0228171256_1 {
    /* This class determines the general characteristics of the menu items in menu MMMenu0228171256_1 */
    border-top:0px;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
    float: left;
}

#MMMenu0228171256_1_Item_0 {
/* Unique ID for item 0 of menu MMMenu0228171256_1 so we can set its position */
    left:0px;
    top:0px;
}

#MMMenu0228171256_1_Item_1 {
/* Unique ID for item 1 of menu MMMenu0228171256_1 so we can set its position */
    left:0px;
    top:26px;
}

#MMMenu0228171256_1_Item_2 {
/* Unique ID for item 2 of menu MMMenu0228171256_1 so we can set its position */
    left:0px;
    top:52px;
}

#MMMenu0228171256_1_Item_3 {
/* Unique ID for item 3 of menu MMMenu0228171256_1 so we can set its position */
    left:0px;
    top:78px;
}

#MMMenuContainer0228171256_1 img {
/* needed for Mozilla/Camino/Netscape */
    border:0px;
}

#MMMenuContainer0228171256_1 a {
/* Controls the general apperance for menu MMMenuContainer0228171256_1's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    text-align:left;
    vertical-align:middle;
    padding:5px;
    background-color:#88cf3c;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}

#MMMenuContainer0228171256_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0228171256_1 */
    color:#ffffff;
    background-color:#57be1a;
}
#MMMenuContainer0228171429_2 {
    /* This ID is related to the master menu div for menu MMMenuContainer0228171429_2 and contains the important positioning information for the menu as a whole */
    position:absolute;
    left:161px;
    top:149px;
    visibility:hidden;
    z-index:300;
    float: left;
}

#MMMenu0228171429_2 {
/* This class defines things about menu MMMenu0228171429_2's div. */
    position:absolute;
    left:0px;
    top:0px;
    visibility:hidden;
    background-color:transparent;
    width:161px;
    height:78px;
}
#MMMenu li:hover, #menu li.hover {  
 position: static;  
}  

.MMMIFVStyleMMMenu0228171429_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228171429_2 */
    border-top:0px solid #77c60f;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
}

.MMMIVStyleMMMenu0228171429_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228171429_2 */
    border-top:0px;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
}

#MMMenu0228171429_2_Item_0 {
/* Unique ID for item 0 of menu MMMenu0228171429_2 so we can set its position */
    left:0px;
    top:0px;
}

#MMMenu0228171429_2_Item_1 {
/* Unique ID for item 1 of menu MMMenu0228171429_2 so we can set its position */
    left:0px;
    top:26px;
}

#MMMenu0228171429_2_Item_2 {
/* Unique ID for item 2 of menu MMMenu0228171429_2 so we can set its position */
    left:0px;
    top:52px;
}

#MMMenuContainer0228171429_2 img {
/* needed for Mozilla/Camino/Netscape */
    border:0px;
}

#MMMenuContainer0228171429_2 a {
/* Controls the general apperance for menu MMMenuContainer0228171429_2's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    text-align:left;
    vertical-align:middle;
    padding:5px;
    background-color:#88cf3c;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}

#MMMenuContainer0228171429_2 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0228171429_2 */
    color:#ffffff;
    background-color:#57be1a;
}
#MMMenuContainer0228171736_3 {
/* This ID is related to the master menu div for menu MMMenuContainer0228171736_3 and contains the important positioning information for the menu as a whole */
    position:absolute;
    left:161px;
    top:186px;
    visibility:hidden;
    z-index:300;
}

#MMMenu0228171736_3 {
/* This class defines things about menu MMMenu0228171736_3's div. */
    position:absolute;
    left:0px;
    top:0px;
    visibility:hidden;
    background-color:transparent;
    width:161px;
    height:104px;
}

.MMMIFVStyleMMMenu0228171736_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228171736_3 */
    border-top:0px solid #77c60f;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
}

.MMMIVStyleMMMenu0228171736_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu0228171736_3 */
    border-top:0px;
    border-left:0px solid #77c60f;
    border-bottom:0px solid #ffffff;
    border-right:0px solid #ffffff;
    width:161px;
    height:26px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:151px;
    height:16px;
}

#MMMenu0228171736_3_Item_0 {
/* Unique ID for item 0 of menu MMMenu0228171736_3 so we can set its position */
    left:0px;
    top:0px;
}

#MMMenu0228171736_3_Item_1 {
/* Unique ID for item 1 of menu MMMenu0228171736_3 so we can set its position */
    left:0px;
    top:26px;
}

#MMMenu0228171736_3_Item_2 {
/* Unique ID for item 2 of menu MMMenu0228171736_3 so we can set its position */
    left:0px;
    top:52px;
}

#MMMenu0228171736_3_Item_3 {
/* Unique ID for item 3 of menu MMMenu0228171736_3 so we can set its position */
    left:0px;
    top:78px;
}

#MMMenuContainer0228171736_3 img {
/* needed for Mozilla/Camino/Netscape */
    border:0px;
}

#MMMenuContainer0228171736_3 a {
/* Controls the general apperance for menu MMMenuContainer0228171736_3's items, including color and font */
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    text-align:left;
    vertical-align:middle;
    padding:5px;
    background-color:#88cf3c;
    font-weight:normal;
    font-style:normal;
    display:block;
    position:absolute;
}

#MMMenuContainer0228171736_3 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0228171736_3 */
    color:#ffffff;
    background-color:#57be1a;
}

And here is the javascript for my menu:

Code:

var mmOpenContainer = null;
var mmOpenMenus = null;
var mmHideMenuTimer = null;

function MM_menuStartTimeout(hideTimeout) {
    mmHideMenuTimer = setTimeout("MM_menuHideMenus()", hideTimeout);    
}

function MM_menuHideMenus() {
    MM_menuResetTimeout();
    if(mmOpenContainer) {
        var c = document.getElementById(mmOpenContainer);
        c.style.visibility = "inherit";
        mmOpenContainer = null;
    }
    if( mmOpenMenus ) {
        for(var i = 0; i < mmOpenMenus.length ; i++) {
            var m = document.getElementById(mmOpenMenus[i]);
            m.style.visibility = "hidden";            
        }
        mmOpenMenus = null;
    }
}

function MM_menuHideSubmenus(menuName) {
    if( mmOpenMenus ) {
        var h = false;
        var c = 0;
        for(var i = 0; i < mmOpenMenus.length ; i++) {
            if( h ) {
                var m = document.getElementById(mmOpenMenus[i]);
                m.style.visibility = "hidden";
            } else if( mmOpenMenus[i] == menuName ) {
                h = true;
            } else {
                c++;
            }
        }
        mmOpenMenus.length = c+1;
    }
}

function MM_menuOverMenuItem(menuName, subMenuSuffix) {
    MM_menuResetTimeout();
    MM_menuHideSubmenus(menuName);
    if( subMenuSuffix ) {
        var subMenuName = "" + menuName + "_" + subMenuSuffix;
        MM_menuShowSubMenu(subMenuName);
    }
}

function MM_menuShowSubMenu(subMenuName) {
    MM_menuResetTimeout();
    var e = document.getElementById(subMenuName);
    e.style.visibility = "inherit";
    if( !mmOpenMenus ) {
        mmOpenMenus = new Array;
    }
    mmOpenMenus[mmOpenMenus.length] = "" + subMenuName;
}

function MM_menuResetTimeout() {
    if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer);
    mmHideMenuTimer = null;
}

function MM_menuShowMenu(containName, menuName, xOffset, yOffset, triggerName) {
    MM_menuHideMenus();
    MM_menuResetTimeout();
    MM_menuShowMenuContainer(containName, xOffset, yOffset, triggerName);
    MM_menuShowSubMenu(menuName);
}

function MM_menuShowMenuContainer(containName, x, y, triggerName) {    
    var c = document.getElementById(containName);
    var s = c.style;
    s.visibility = "inherit";
    
    mmOpenContainer = "" + containName;
}