[css-d] Descendant selector works differently in IE and FF

[Thomas Burkhart]

Hi,

I stumbled upon the following problem.

Just have a look at my site http://www.ourmagic.net/index_copy(1).htm

The site is under heavy reconstruction so please only comment on the problem
I describe.

If you look at it in IE and in FF you will recognize that the submenu "Close
Up . Test"

Looks different.

Here is a small excerpt from the HTML;


<ol id="hauptMenu">
    <li id ="menu1"><a  href="zauberer/zauberkuenstler-meine-magie.htm"
">Zauberkunst</a><span>&nbsp;.&nbsp;</span>

                <ol class="subMenu">
            <li class="sub1"> <a
href="zauberer/zauberkuenstler-magie-im-turm.htm" ">Vorteile</a><span
>&nbsp;.&nbsp;</span></li>
            <li class="sub2"> <a
href="zauberer/zauberkuenstler-magie-im-turm.htm" ">Meine Magie</a></li>
                </ol>
        
    </li>
    <li id= "menu2"><a  href="zauberer/zauberkuenstler-magie-im-turm.htm"
">Shows</a><span >&nbsp;.&nbsp;</span>

                <ol class="subMenu" >
            <li class="sub1"><a
href="zauberer/zauberkuenstler-magie-im-turm.htm" ">Close Up</a><span
>&nbsp;.&nbsp;</span></li>
            <li class="sub2"><a
href="zauberer/zauberkuenstler-magie-im-turm.htm" ">Test</a></li>
                </ol>

    </li>


This here is the corresponding CSS part

/*Links: Rubrik gro&szlig;*/

#hauptMenu a:link,  #hauptMenu a:visited        {color:#F6F6F6;
        top: -1px;
        left: 0px;
} /*inaktiv & besuchte */
#hauptMenu a:hover ,  #hauptMenu a:active,  #hauptMenu a:focus
{color:#fef000; } /*aktiv gelb*/



#menu1, #menu2, #menu3, #menu4, #menu5, #menuReferenzen, #menuGalerie ,
#menuLinks, #menuKontakt,#menu10 
{
        background-image:none;
        background-position:top center;
        background-repeat:no-repeat;
}


#menu1, #menu2, #menu3, #menu4, #menu5
{
        text-transform:uppercase;
}

#menuReferenzen, #menuGalerie , #menuLinks, #menuKontakt
{
        text-transform:none;
}




.subMenu
{
        list-style: none;
        display:none;
        position:absolute;
        left:0px;
        top:1.3em;
        width:200px;
        color:#7D7D7D;
}       


.subMenu li {
        float:left;
        display:block;
        position:relative;
        padding:0;      
}



.subMenu  a:link, .subMenu  a:visited
{ 
        color:#7D7D7D;
}


.subMenu  a:hover, .subMenu  a:active, .subMenu  a:focus 
{
color:#FEF000;
}



The Idea is, that I can switch the submenus on and of and highlight a
specific submenu like in this case "Test" by declaring

This in the header of the page

//make submenu of menu2 visible
#menu2 .subMenu
{
        display:block;
}

//highlight second menue item of submenu
#menu2 .sub2 a:link
{
        color:#fef000;
}



Now the effect is this:


The

.subMenu  a:link, .subMenu  a:visited
{ 
        color:#7D7D7D;
}

In the stylesheet is ignored by FF

Also the

#menu2 .sub2 a:link
{
        color:#fef000;
}


Can you explain me what the problem is?

Thanks

Thomas

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/