Page 1 of 1

help with css

Posted: Fri Feb 27, 2009 12:36 pm
by bouncer
hi there,

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 */
 
IE -> http://img401.imageshack.us/img401/6483/ex1.jpg
Firefox -> http://img24.imageshack.us/img24/4634/ex2m.jpg

Re: help with css

Posted: Fri Feb 27, 2009 1:59 pm
by mfrank410
Could you post your HTML? You'll get a faster answer that way.

Thanks

Re: help with css

Posted: Fri Feb 27, 2009 2:00 pm
by jayshields
If all that CSS is just for that little navigation menu then I think you'd be better off starting again from scratch.

By the way, what's with the missing bits of the border in both images? Surely that's unintentional (an image error?)?

Re: help with css

Posted: Fri Feb 27, 2009 2:49 pm
by kaszu

Code: Select all

#tabmenu ul li#current.haschild.active a
#tabmenu ul li.haschild.active a
#tabmenu ul li#current.haschild.active ul li.haschild a.child:hover
etc.
IE has problems with .one_class.other_class. Use .one_class or .other_class, you can't use both at the same time. It's a huge limitation, but that's the reality :(

Re: help with css

Posted: Sat Feb 28, 2009 4:33 am
by bouncer
jayshields wrote:If all that CSS is just for that little navigation menu then I think you'd be better off starting again from scratch.

By the way, what's with the missing bits of the border in both images? Surely that's unintentional (an image error?)?
when i take this images i was running some tests. :roll:
kaszu wrote:

Code: Select all

#tabmenu ul li#current.haschild.active a
#tabmenu ul li.haschild.active a
#tabmenu ul li#current.haschild.active ul li.haschild a.child:hover
etc.
IE has problems with .one_class.other_class. Use .one_class or .other_class, you can't use both at the same time. It's a huge limitation, but that's the reality :(
so in this particullary place how can i solve that problem to get the same result in ff and ie ?

thanks in advance