PDA

View Full Version : menu not working in IE


Fullwebservice
01-16-2007, 03:16 PM
Hi

I made this menu http://www.davidstokes.com/_dev/3/ using CSS.

if you look at in in IE and FF you will see whats wrong, the FF one is the way it should look.


CSS - http://www.davidstokes.com/_dev/3/
http://www.davidstokes.com/_dev/3/
Embedded Styles from http://www.davidstokes.com/_dev/3/

<!--
@import url("menu001.css");
@import url("has001.css");

-->
html {
font-size: 100%; /* IE5 hack */
}
table {
font-size:1em; /* IE5 hack */
}


http://www.davidstokes.com/_dev/3/menu001.css

/**************** menu coding *****************/
#menu-holder {
display: block;
width: 148px;
background-color:#CCCCCC;
background-position:top center;
background-repeat:repeat-y;
margin: 0;
padding: 0 0 0 0px;
text-align: center;
}


#menu {
width: 138px;
background-color: #fff;
text-align: left;
border: 1px solid #DEE2D1;
padding-bottom:2px;
text-transform:capitalize;
}

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

}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #fff;
margin: 0;
padding: 5px 2px 6px 8px; /* around all elements */


}

#menu h2 {
color: #514e4e;
background: #B6C58A;
text-transform:capitalize;
}

#menu a {
color: #5c5d5d;
background: #F9FAF6;
text-decoration: none;
border-right: 7px solid #f78787;
border-bottom: 1px solid #F9FAF6;
background-image:url(menu/bg-menu.gif);
background-position:top left;
background-repeat:repeat-x;
}

#menu a:hover {
color: #ff2d2d;
background: #DFE5CA;
border-right: 7px solid #ff2d2d;
border-bottom: 1px solid #DFE5CA;
background-image:url(menu/bg-menu_on.gif);
background-position:top left;
background-repeat:repeat-x;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 99.5%; /* was 100 - change needed when menu inside tables in IE6 */
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#current a {
color: #bb1717;
text-decoration: none;
border-right: 7px solid #bb1717;
}

.submenu a {
border-right: 7px solid #E6EAD9;
}


http://www.davidstokes.com/_dev/3/menu001.css

/**************** menu coding *****************/
#menu-holder {
display: block;
width: 148px;
background-color:#CCCCCC;
background-position:top center;
background-repeat:repeat-y;
margin: 0;
padding: 0 0 0 0px;
text-align: center;
}


#menu {
width: 138px;
background-color: #fff;
text-align: left;
border: 1px solid #DEE2D1;
padding-bottom:2px;
text-transform:capitalize;
}

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

}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #fff;
margin: 0;
padding: 5px 2px 6px 8px; /* around all elements */


}

#menu h2 {
color: #514e4e;
background: #B6C58A;
text-transform:capitalize;
}

#menu a {
color: #5c5d5d;
background: #F9FAF6;
text-decoration: none;
border-right: 7px solid #f78787;
border-bottom: 1px solid #F9FAF6;
background-image:url(menu/bg-menu.gif);
background-position:top left;
background-repeat:repeat-x;
}

#menu a:hover {
color: #ff2d2d;
background: #DFE5CA;
border-right: 7px solid #ff2d2d;
border-bottom: 1px solid #DFE5CA;
background-image:url(menu/bg-menu_on.gif);
background-position:top left;
background-repeat:repeat-x;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 99.5%; /* was 100 - change needed when menu inside tables in IE6 */
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#current a {
color: #bb1717;
text-decoration: none;
border-right: 7px solid #bb1717;
}

.submenu a {
border-right: 7px solid #E6EAD9;
}

Excavator
01-16-2007, 04:36 PM
Hello Fullwebservice,
These drop-down menus can be very complicated to debug.
I know I'm preaching to the choir here but this is a perfect example of how using the validator while your developing your page can help you.
I'm not saying that fixing all those errors is going to fix your menu but it'll sure be a good start if it doesn't.

Have a look at this very long link (http://qa-dev.w3.org/unicorn/observe?ucn_task=conformance&ucn_uri=http%3A%2F%2Fwww.davidstokes.com%2F_dev%2F3%2F)