Div shows up under other div

Hover over classes, you get a dropdown and the text goes under the forum content. When you try to go over the navigation menu options, if you get to I think the third item the box goes away, because of the issue stated. I was having this problem on my other pages (non forum) and was suggested to take out a position: relative; from a couple elements and it fixed the problem. Not sure what is causing it on this area, though the css is a little different. Anyone mind taking a peak?

Hi,
I quick edit with firebug shows the dropdown working when you remove the relative positioning from the dl.


ul.topiclist [B]dl[/B] {
    [COLOR=Red]/*position: relative;*/[/COLOR]
}

Awesome, that fixed it. Does firebug just look at all code and figure out problems? I’m assuming it can’t just detect and fix everything but it obviously found this? Some information on that would be awesome. Thanks again!

I wish it could - that would be great :slight_smile:

It allows you to edit the code on the fly and see what happens when you make changes. In this way you can test things out quickly and see what the problem is especially on live sites.

You still have to find the right things to change though.:wink:

Hi,
Firebug does not figure out problems, it just allows you to view the html and corresponding css at the same time. Then you can do live edits on either of them.

As far as figuring out the problem, that just comes with experience and knowledge of how css works. Positioned elements (other than the default of static) lower down in the html source order will always [URL=“http://reference.sitepoint.com/css/stacking”]stack above previous positioned elements with a default of z-index:auto.

Okay I have another problem, which I don’t know if I need to make a new post or not but it still pertains to that drop down menu. In IE 5 & 6 when you over classes, the dropdown appears way way to the right. If you put your mouse over it and hit your arrow key and move your mouse steady with the nav, you can see it far out there :wink:
I’m wanting to do a conditional for IE 5&6. I’m trying to figure it out, if you could give any pointers as to what causes them to do that and if I can fix it.

Hi,
I haven’t tested it in IE6 with these changes yet but they need to be done for IE just the same.

It is better to hide your sub ul with a large negative margin and then reveal it on hover with margin:0; IE will choke sometimes when you change the positioning on hover.

You also need to set position:relative on the #nav li to establish it as the containing block for the AP’d sub ul. Then you will be able to set left:0 which IE6/7 need for AP’d elements.

Try these changes and see if it helps IE6 -


[B]#nav li[/B] {
    float:left;
    [COLOR=Blue]position:relative;/*set containing block for sub ul*/[/COLOR]
}

[B]#nav li ul [/B]{
    position: absolute;
    width: 10em;
[COLOR=Blue]    left:0;
    top: 49px;
    margin-left: -999em;[/COLOR]
    [COLOR=Blue]z-index:1;/*keep it above other positioned elements*/[/COLOR]
}

[B]#nav li:hover ul[/B] {
    text-align: center;
    background-color: #000;
    border: solid 1px #504939;
[COLOR=Red]    /*left: 405px;*/
    /*top: 49px;*/[/COLOR]
   [COLOR=Blue] margin-left:0;/*show sub ul on hover*/[/COLOR]
    height: 90px;
    width: 105px;
    border-top: solid 0px;    
}

I made the exact changes, and it actually broke FF & IE 7 but kept IE 8 working. I could write a conditional comment for it, but it didn’t fix 5 or 6 either, so it kinda would put me back a step it seems. I put the previous code back up because the site is live and 2 browsers working > 1 browser working atm.

Looking at your page again I don’t see that you have the sfhover script in place for IE6. IE6 only supports :hover on anchors, it does not support li:hover.

Have a read through the Suckerfish Article for details on how to apply the script for IE6 and under.

Here is an example with the script in place for IE6 using the .sfhover class.

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li:hover ul ul,
#nav[COLOR=Blue] li.sfhover ul, [/COLOR]
#nav[COLOR=Blue] li.sfhover ul ul[/COLOR] {
    margin-left:-999em;
}

You must have missed something because those edits work fine for me in FF and they are the preferred method for hiding the sub ul.

When adding the fixes above shown in blue be sure to remove the left:-999em and replace it with margin-left:-999em;

#nav li ul {
    position: absolute;
    width: 10em;
   [COLOR=Red]/* left: -999em; */ [/COLOR] 
[COLOR=Blue]    left:0;
    top: 49px;
    margin-left: -999em;[/COLOR]
    z-index:1;/*keep it above other positioned elements*/
}

You also have to get position:relative; on the #nav li for it to work.

If you can’t make the changes on the live site and leave them there then I have no way of knowing where you went wrong.

You may need to set up a live test case if you do not want to make the changes to your site right away. That way we can keep up with the changes you make to the code.

I’m on my way out the door right now though, maybe someone else can pick up where I left off.