i need some help with this css i can get the desired result in firefox but not in ie ... can someone tell me what i'm doing wrong ?
Code: Select all
.menutab {
font: 12px Arial, Helvetica, sans-serif;
background: url(../../images/nav_bg_gray.png) no-repeat left bottom;
width: 100%;
height: 31px;
margin: 0px;
padding:0px;
}
#tabmenu {
height: 28px;
margin: 0px 0px 0px 15px;
padding: 0;
position: relative;
z-index: 900;
float: left;
width: 100%;
}
#tabmenu ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
height: 28px;
position: relative;
top: 1px;
}
#tabmenu ul li {
position: relative;
}
/*PARENT MENU*/
#tabmenu a {
font-weight: bold;
color: #ffffff;
// color: #AF100E;
text-decoration: none;
cursor: pointer;
height: 28px;
line-height: 28px;
float: left;
padding: 0;
margin: 0;
}
#tabmenu ul li {
background: url(../../images/tab_gray.png) no-repeat -1px 0px;
padding-left: 11px;
}
#tabmenu ul li a,
#tabmenu ul li a_current,
#tabmenu ul li a.child {
display: block;
background: url(../../images/tab_gray.png) no-repeat 100% 0%;
padding-right: 12px;
color: #FFF;
}
/*PARENT MENU ACTIVE*/
#tabmenu ul li#current.haschild.active,
#tabmenu ul li#current.active,
#tabmenu ul li.haschild.active {
background: url(../../images/tab_gray.png) no-repeat 0 -41px;
// padding-left: 11px;
}
#tabmenu ul li#current.haschild.active a,
#tabmenu ul li#current.active a,
#tabmenu ul li.haschild.active a {
display: block;
background: url(../../images/tab_gray.png) no-repeat 100% -41px;
color: #AF100E;
}
/*ALL LISTS*/
#tabmenu li {
float: left;
padding: 0;
background: none;
}
#tabmenu ul ul a {
background: none;
}
#tabmenu li:hover ul,
#tabmenu li li:hover ul,
#tabmenu li li li:hover ul,
#tabmenu li li li li:hover ul,
#tabmenu li.iehover ul,
#tabmenu li li.iehover ul,
#tabmenu li li li.iehover ul,
#tabmenu li li li li.iehover ul {
background: #666666;
// background: #e4e4e4;
}
/*PARENT ITEM SEPARATOR*/
/*DEFINE HOVER COLORS*/
/* EXTRA CODE FOR IE - DON'T CHANGE TAB HOVER */
#tabmenu ul li.haschild.active a.haschild:hover {
// color:#333 ;
color:#666666;
}
#tabmenu li:hover a, #tabmenu li:iehover a {
color: #ffffff;
// color: #AF100E;
}
#tabmenu ul li a:hover,
#tabmenu ul li ul li a:hover,
#tabmenu ul li ul li ul li a:hover,
#tabmenu ul li:hover,
#tabmenu ul li.haschild.active ul li#current.active:hover,
#tabmenu ul li.haschild.active:hover,
#tabmenu ul li#current.haschild.active ul li.haschild:hover
{
color: #eee;
// color: #AF100E;
// background-color: #e4e4e4;
background-color: #666666;
}
/*
POSSIBLE TO SHOW PARENT INDICATOR HERE (NEEDS PADDING)
#tabmenu a.haschild,
#tabmenu li.active a.haschild {
background: url(../../images/arrow_right.gif) 100% 0 no-repeat;}
*/
/*SUBLEVEL PARENT INDICATORS*/
#tabmenu ul li ul li a.child, #tabmenu ul li ul li a.child:hover,
#tabmenu ul li ul li a.child:hover, #tabmenu ul li#active ul a.child,
#tabmenu ul li.haschild.active ul li.haschild.active a.child,
#tabmenu ul li#current.haschild.active ul li.haschild,
#tabmenu ul li.haschild.active ul li#current.haschild.active a.child,
#tabmenu ul li.haschild.active ul li.haschild.active ul li.haschild a.child
{
background: url(../../images/arrow_right.gif) 161px 50% no-repeat;
padding:0px;
color: #eee;
// color: #AF100E;
}
#tabmenu ul li#current.haschild.active li a,
#tabmenu ul li.haschild.active li a,
#tabmenu ul li.haschild.active ul li#current.active,
#tabmenu ul li.haschild.active ul li#current.active a,
#tabmenu ul li.haschild.active ul li.haschild.active
{
// color: #AF100E;
color: #eee;
background-image: none;
}
/* ADDED FOR IE */
#tabmenu ul li#current.haschild.active ul li.haschild a.child:hover
{
// background: #e4e4e4 url(../../images/arrow_right.gif) 161px 50% no-repeat;
background: #666666 url(../../images/arrow_right.gif) 161px 50% no-repeat;
}
/*SUBLEVEL STYLES*/
/*SUBLEVEL TEXT STYLES*/
#tabmenu li li a {
font-weight: normal;
padding: 0;
height: 24px;
line-height: 24px;
text-indent: 5px;
}
#tabmenu ul ul a {
display: block;
color: #ffffff;
// color: #AF100E;
text-decoration: none;
width: 167px;
text-transform: none;
}
#tabmenu li li {
padding: 0;
background: none;
/*DONT SHOW THE BACKGROUND IMAGE*/
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #666666;
}
/*SUBLEVEL POSITIONING*/
#tabmenu li ul {
top: 28px;
position: absolute;
left: -999em;
height: auto;
width: 170px;
font-weight: normal;
border-width: 0;
margin: 0;
padding: 0;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: none;
border-top: none;
}
#tabmenu li li {
float: left;
padding: 0;
width: 170px;
}
#tabmenu li ul ul {
margin: -29px 0 0 170px;
}
#tabmenu li:hover, #tabmenu li.iehover {
left: 0;
}
/*SUBLEVEL HOVER STYLES*/
#tabmenu ul ul a:hover {
background: none;
height: 24px;
line-height: 24px;
padding: 0;
margin: 0;
font-weight: bold;
}
#tabmenu li li:hover {
// background: #e4e4e4;
background: #666666;
border-bottom: 1px solid #e4e4e4;
}
/* NO ACTIVE STYLES */
#tabmenu li li.active, #tabmenu li li.active {
background-image: none;
}
/* HIDE OTHER LISTS FROM IE */
#tabmenu li:hover ul ul,
#tabmenu li:hover ul ul ul,
#tabmenu li:hover ul ul ul ul,
#tabmenu li.iehover ul ul,
#tabmenu li.iehover ul ul ul,
#tabmenu li.iehover ul ul ul ul {
left: -999em;
}
#tabmenu li:hover ul,
#tabmenu li li:hover ul,
#tabmenu li li li:hover ul,
#tabmenu li li li li:hover ul,
#tabmenu li.iehover ul,
#tabmenu li li.iehover ul,
#tabmenu li li li.iehover ul,
#tabmenu li li li li.iehover ul {
z-index: 100;
left: 0;
}
#tabmenu li.iehover ul li.iehover
{
// background: #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background: #666666;
// border-bottom: 1px solid #666666;
}
/* @end */
Firefox -> http://img24.imageshack.us/img24/4634/ex2m.jpg