tara.hagemann
06-05-2009, 01:28 PM
I'm working on a site and had the site all ready to go. Then someone looked at the site using IE 6 and IE 7 and the menu navigation is funky. It works great in IE 8, FF and Safari. Of course, MS would prove to make me want to pull all my hair out!
http://swift.m45.com/home.htm - Look at the OUR SERVICES drop down. It throws the menu way off to the right. In actual fact I really don't want it to go right or left but stay underneath the OUR SERVICES name.
Something is weird with the CSS. Maybe I didn't copy something correctly, or this menu doesn't work in IE6 or IE7?
CSS [CODE]
[.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
height: 18px;
padding: 3px;
border: 0px;
border-left-width: 0;
text-decoration: none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
vertical-align:middle;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
list-style-type: none;}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 150px; /*width of sub menu levels*/
color:#333333;
text-decoration: none;
padding: 3px;
border-top: 1px solid #666666;
background-image:url(images/trans-white-menu.png);
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
vertical-align:middle;
}
.suckertreemenu ul li a:hover{
background-color:#CCCCCC;
color:#333333;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #FFFFFF url(images/trans-white-menu.png);
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/* End */
<!--Keep OUR SERVICES from having white box-->
.servicesNav
{display: block;
width: 100px; /*Width of top level menu link items*/
padding: 3px;
border: 0px;
border-left-width: 0px;
text-decoration: none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
vertical-align:middle;}
]
http://swift.m45.com/home.htm - Look at the OUR SERVICES drop down. It throws the menu way off to the right. In actual fact I really don't want it to go right or left but stay underneath the OUR SERVICES name.
Something is weird with the CSS. Maybe I didn't copy something correctly, or this menu doesn't work in IE6 or IE7?
CSS [CODE]
[.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
height: 18px;
padding: 3px;
border: 0px;
border-left-width: 0;
text-decoration: none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
vertical-align:middle;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
list-style-type: none;}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 150px; /*width of sub menu levels*/
color:#333333;
text-decoration: none;
padding: 3px;
border-top: 1px solid #666666;
background-image:url(images/trans-white-menu.png);
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
vertical-align:middle;
}
.suckertreemenu ul li a:hover{
background-color:#CCCCCC;
color:#333333;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #FFFFFF url(images/trans-white-menu.png);
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/* End */
<!--Keep OUR SERVICES from having white box-->
.servicesNav
{display: block;
width: 100px; /*Width of top level menu link items*/
padding: 3px;
border: 0px;
border-left-width: 0px;
text-decoration: none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
vertical-align:middle;}
]