Drop down problems

HTML & CSS
1

I can hover over Polysomnography and the drop down appears yet goes away when I try to click on one of the links. Also why is the drop down showing a transparent red??

I think it might have something to do with my header and possibly my sticky footer maybe?

Here’s the link: http://designingyours.com/KMMED/

2

Try to add this to #nav


position:relative;
z-index:1;
3

As I looked with firebug I’m guessing it’s because the submenu goes down in the content div.

How should I position my Header, Nav, Content, and Footer?

As of now they don’t have any positions.

4

Perfect!, could you explain please what happened here?

5

The nav didn’t have a property position: relative (or any other position for that matter), where the content div did. By default html elements are positioned static. Relative positioned elements can overlap other elements. Z-index sets the stack level but is only possible to use on positioned elements. So by applying position relative to #nav as well they have the same stacking order. The problem here is that the last element in the source is stacked highest (Content). Zo by applying z-index: 1 to nav you stack it higher.

6

Hi Bades,

Your page is broken badly in IE7, I did not look at it in IE6 but at the very least IE7 should get fixed. You can see what is going on by using “developer tools” with IE8 in IE7 mode.

One of the problems is your sub UL (the dropdown). You are changing it’s position to absolute on :hover. It should be set as position:absolute to begin with and just change the margin-left:-999em to zero on hover.

.sub {margin-left: -9999em;}

/* This is how the submenu <ul> will be displayed */
#nav li:hover ul{
    display:block;
    position:absolute;
    background-color:red;
    border: 1px solid black inset; 
    margin:0; padding:0;
}

Have a look at this Simple Dropdown as it shows how to set the initial styles on the sub UL and what changes on hover.

7

Thanks for the help guys.

Ray - I haven’t started looking ie7 just yet. To be honest I really know much about all the problems associated with ie7. Is there a resource that lists major issues with ie7 because I wouldn’t know where to even begin fixing ie7 errors.

Thanks, also if you shrink my page vertically the left and right borders of the wrapper start to shrink up as well and I know it has to do with the sticky footer I got going on just not sure how to fix that.

8

Thanks, also if you shrink my page vertically the left and right borders of the wrapper start to shrink up as well and I know it has to do with the sticky footer I got going on just not sure how to fix that.

Hi,
Yes, that is due to the #wrapper being pulled through the top of the viewport. Without having to rework that sticky footer method an easy fix would be to repeat the borders on your Content div.

You will have to drag them out lt/rt with negative margins to lay them on top of the #wrappers borders (which will still be needed for short pages). Floats in the Content also need to be contained to force the borders down.

Your Content rules would be as follows:

[B]#content[/B] {
    overflow:hidden; /*contain floats*/
    border-left:1px solid #BECEFF;
    border-right:1px solid #BECEFF;
    margin:0 -1px; /*drag borders over wrapper borders*/
    padding: 15px 40px 40px 0;
    position:relative;
}

To be honest I really know much about all the problems associated with ie7. Is there a resource that lists major issues with ie7 because I wouldn’t know where to even begin fixing ie7 errors.

Most of your IE6/7 issues will always be “haslayout” problems but there are many bugs as well. There are some resources around that will help.

I’ll take a look at your page in IE7 later and see if I can point out some of the problems. Adding the overflow:hidden; to your Content div will trip “haslayout” for IE7 so it may fix those floated columns.