help with css

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
bouncer
Forum Contributor
Posts: 162
Joined: Wed Feb 28, 2007 10:31 am

help with css

Post 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
User avatar
mfrank410
Forum Newbie
Posts: 4
Joined: Fri Feb 27, 2009 1:45 pm
Location: Toronto, Canada

Re: help with css

Post by mfrank410 »

Could you post your HTML? You'll get a faster answer that way.

Thanks
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: help with css

Post 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?)?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: help with css

Post 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 :(
bouncer
Forum Contributor
Posts: 162
Joined: Wed Feb 28, 2007 10:31 am

Re: help with css

Post 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
Post Reply