IE 7 Want pop up menu to cover javascript slideshow

[dreynaldo]

Hi everyone,

I am trying to get pop-up menu to display on top of a javascript slideshow that I have on my Fraternity's homepage [http://uscdsp.com/]. Currently, the slideshow is covering the submenu options.

The site works fine in Firefox, and although I tried to adjust the z-index on the menu [even up to a value of 30,000] I've had no luck.

Any help is much appreciated. Thank you.

Here is the CSS code:



td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
}

#FWTableContainer1627810594 {
/* 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:187px;
height:296px;
text-align:left;
}

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

#MMMenu0104182438_0 {
/* This class defines things about menu MMMenu0104182438_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:166px;
height:153px;
}

.MMMIFVStyleMMMenu0104182438_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182438_0 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:166px;
height:39px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
height:23px;
}

.MMMIVStyleMMMenu0104182438_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182438_0 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:166px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
height:23px;
}

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

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

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

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

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

#MMMenuContainer0104182438_0 a {
/* Controls the general apperance for menu MMMenuContainer0104182438_0's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:19px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0104182438_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0104182438_0 */
color:#ffcc00;
background-color:#330033;
}
#MMMenuContainer0104182405_1 {
/* This ID is related to the master menu div for menu MMMenuContainer0104182405_1 and contains the important positioning information for the menu as a whole */
position:absolute;
left:187px;
top:74px;
visibility:hidden;
z-index:30000;
}

#MMMenu0104182405_1 {
/* This class defines things about menu MMMenu0104182405_1's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:136px;
height:223px;
}

.MMMIFVStyleMMMenu0104182405_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182405_1 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:136px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:120px;
height:22px;
}

.MMMIVStyleMMMenu0104182405_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182405_1 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:136px;
height:37px;
voice-family: "\"}\"";
voice-family:inherit;
width:120px;
height:22px;
}

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

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

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

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

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

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

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

#MMMenuContainer0104182405_1 a {
/* Controls the general apperance for menu MMMenuContainer0104182405_1's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:18px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0104182405_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0104182405_1 */
color:#ffcc00;
background-color:#330033;
}
#MMMenuContainer0104170416_0 {
/* This ID is related to the master menu div for menu MMMenuContainer0104170416_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:187px;
top:111px;
visibility:hidden;
z-index:30000;
}

#MMMenu0104170416_0 {
/* This class defines things about menu MMMenu0104170416_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:128px;
height:112px;
}

.MMMIFVStyleMMMenu0104170416_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104170416_0 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:128px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:112px;
height:22px;
}

.MMMIVStyleMMMenu0104170416_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104170416_0 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:128px;
height:37px;
voice-family: "\"}\"";
voice-family:inherit;
width:112px;
height:22px;
}

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

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

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

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

#MMMenuContainer0104170416_0 a {
/* Controls the general apperance for menu MMMenuContainer0104170416_0's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:18px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0104170416_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0104170416_0 */
color:#ffcc00;
background-color:#330033;
}
#MMMenuContainer0104182315_2 {
/* This ID is related to the master menu div for menu MMMenuContainer0104182315_2 and contains the important positioning information for the menu as a whole */
position:absolute;
left:187px;
top:147px;
visibility:hidden;
z-index:30000;
}

#MMMenu0104182315_2 {
/* This class defines things about menu MMMenu0104182315_2's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:168px;
height:115px;
}

.MMMIFVStyleMMMenu0104182315_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182315_2 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:168px;
height:39px;
voice-family: "\"}\"";
voice-family:inherit;
width:152px;
height:23px;
}

.MMMIVStyleMMMenu0104182315_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104182315_2 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:168px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:152px;
height:23px;
}

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

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

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

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

#MMMenuContainer0104182315_2 a {
/* Controls the general apperance for menu MMMenuContainer0104182315_2's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:19px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0104182315_2 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0104182315_2 */
color:#ffcc00;
background-color:#330033;
}
#MMMenuContainer0113022638_3 {
/* This ID is related to the master menu div for menu MMMenuContainer0113022638_3 and contains the important positioning information for the menu as a whole */
position:absolute;
left:187px;
top:184px;
visibility:hidden;
z-index:30000;
}

#MMMenu0113022638_3 {
/* This class defines things about menu MMMenu0113022638_3's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:157px;
height:112px;
}

.MMMIFVStyleMMMenu0113022638_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu0113022638_3 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:157px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:141px;
height:22px;
}

.MMMIVStyleMMMenu0113022638_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu0113022638_3 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:157px;
height:37px;
voice-family: "\"}\"";
voice-family:inherit;
width:141px;
height:22px;
}

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

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

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

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

#MMMenuContainer0113022638_3 a {
/* Controls the general apperance for menu MMMenuContainer0113022638_3's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:18px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0113022638_3 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0113022638_3 */
color:#ffcc00;
background-color:#330033;
}
#MMMenuContainer0104170622_1 {
/* This ID is related to the master menu div for menu MMMenuContainer0104170622_1 and contains the important positioning information for the menu as a whole */
position:absolute;
left:187px;
top:221px;
visibility:hidden;
z-index:30000;
}

#MMMenu0104170622_1 {
/* This class defines things about menu MMMenu0104170622_1's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
width:148px;
height:112px;
}

.MMMIFVStyleMMMenu0104170622_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104170622_1 */
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:148px;
height:38px;
voice-family: "\"}\"";
voice-family:inherit;
width:132px;
height:22px;
}

.MMMIVStyleMMMenu0104170622_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0104170622_1 */
border-top:0px;
border-left:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:148px;
height:37px;
voice-family: "\"}\"";
voice-family:inherit;
width:132px;
height:22px;
}

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

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

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

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

#MMMenuContainer0104170622_1 a {
/* Controls the general apperance for menu MMMenuContainer0104170622_1's items, including color and font */
text-decoration:none;
font-family:constantia;
font-size:18px;
color:#330033;
text-align:left;
vertical-align:middle;
padding:7px;
background-color:#ffcc00;
font-weight:normal;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer0104170622_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0104170622_1 */
color:#ffcc00;
background-color:#330033;
}

[abduraooft]

Hi dreynaldo, welcome to CF. There a lot of issues with your current markup. et me brief some main points.

To expect cross browser compatibility, we need to supply a valid markup (http://validator.w3.org/#validate_by_input) to the browsers. To do this, we need to add a valid DOCTYP (http://www.alistapart.com/stories/doctype/)E at the top.

Now regarding your current markup: It's very bad to use tables for making a layout. They should only be used for showing tabular data. I'd recommend you to read http://www.hotdesign.com/seybold/ . So our aim should be to produce a semantic markup (http://www.boagworld.com/technology/semantic_code_what_why_how/) for making a website.

After that, to make a drop down menu, always use the support of CSS instead of javascript, as a CSS based menu has many advantages over the other one. Have a look to the son of suckerfish menu (http://htmldog.com/articles/suckerfish/dropdowns/)tutorial.

Good luck.

PS: Why did you add the line

@import url("mainmenu_popup.css.css"); 6 times into your markup?

[dreynaldo]

Hi abduraooft,

Thanks for the welcome and the helpful articles. I appreciate your insight and will follow the guidelines of semantic coding when building future websites.

As for the 'import' line, I downloaded the trial version of adobe fireworks and used it to create the main menu. My best guess is that it generated that line each time I imported the menu into dreamweaver.

Thanks again.