Drop Down pushes menu over

[AVdes]

skip this to get to the issue I'm having ------>
I have this drop down menu that uses two transparent PNG's for the background of the drop down menu. Since they have alpha channels I applied some workarounds to make them work with IE5 and 6. This made it so that the links weren't working. So to fix that I made sure that no positioning was applied to any ul or li except for the links themselves. that means that the position for the drop down list is applied to the containing div.

The issue I'm having ------>
Long story short. My drop down has one problem now. when you scroll over the first set of links the related links drop down but push the menu over to the right. I can't seem to figure out how to make them stay put.

too see it go here http://www.avdes.com/tests/dropdown.html

or see the basic code here:

CSS:

#header {
    position: relative;
    width: 100%;
    height: 108px;
    width: 950px;
    padding: 0;
    margin: 0;
   font-family: Verdana, Arial;
    font-size: 8.5pt;
    letter-spacing: 1pt;
    float: left;
    top: 0px;
    left: 0px;
    }

/* header link styles */

#header a:link {
    color: #C9F3FB; /* Pale Blue */
    }
#header a:visited, #header a:active { 
    color: #C9F3FB;
    }
#header a:hover {
    color: #49DDFD; /* Bright Blue */
    }

#dropNavi {
    position: absolute;
    top: 76px;
    left: 200px;
    z-index: +1;
    }
#dropNavi ul {
    padding: 0;
    margin: 0;
    float: left;
    }
/* needed for IE7 */
#dropNavi a {
    display: block;
    width: auto;
    }

/* lines up the list horizontally */
#dropNavi li {
    float: left;
    width: auto;
    padding-right: 5px;
    list-style: none;
    }

/* navigation revealed */
#dropNavi li ul {
    display: none;
    left: -999em;
    height: auto;
    /*border: 1px #0099cc solid;*/
    margin: 0;
    padding-top: 8px;
    padding-bottom: 15px;
    }

/* controlls the links inside the drop box */
#dropNavi li ul a {
    position: relative;
    z-index: 15;
    }

/* sets  the dimentions for the drop down box */
#dropNavi li li {
    width: 182px;
    padding-left: 12px;
    padding-top: 6px;
    }

/* creats a roll over for the links
#dropNavi li:hover, 
#dropNavi li.sfhover {
    background: #eda;
    }
*/

/* Settings for drop6 class */
#dropNavi li:hover ul.drop6, 
#dropNavi li.sfhover ul.drop6 {
    display: block; /* wont show up without this */
    top: 12px;
    left: auto;
    background: url(http://www.avdes.com/tests/drop_6.png) top no-repeat;
    }
    
/* Settings for all else */
#dropNavi li:hover ul,
#dropNavi li.sfhover ul {
    display: block; /* wont show up without this */
    top: 12px;
    left: auto;
    background: url(http://www.avdes.com/tests/drop_4.png) top no-repeat;
    width: 182px;
    /*background: #000000;*/
    }

HTML:

<div id="header">
                <img class="header" src="http://www.avdes.com/tests/header.png" alt="header" />
<div id="dropNavi">
                    <ul>
                        <li><a href="#">Home</a></li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Overview</a>
                            <ul>
                                <li>
                                    <a href="#">eLearning</a>
                                </li>
                                        
                                <li>
                                    <a href="#">Webcasting</a>
                                </li>
                                        
                                <li>
                                    <a href="#">Documents</a>
                                </li>
                                        
                                <li>
                                    <a href="#">eSales</a>
                                </li>        
                            </ul>
                        </li>
                                
                        <li>&middot;</li>    
                                
                        <li><a href="#">How It Works</a></li>
                            
                        <li>&middot;</li>
                                
                        <li><a href="#">Solutions</a>
                            <ul class="drop6">                                                    
                                <li>
                                    <a href="#">Train Your Employees</a>
                                </li>
                                            
                                <li>
                                    <a href="#">Train Your New Hires</a>
                                </li>
                                    
                                <li>
                                    <a href="#">Train Your Sales Reps</a>
                                </li>
                                    
                                <li>
                                    <a href="#">Train Your Customers</a>
                                </li>
                            
                                <li>
                                    <a href="#">Sell Your Training</a>
                                </li>
                                
                                <li>
                                    <a href="#">Compliance</a>
                                </li>                            
                            </ul>
                        </li>
                        
                        <li>&middot;</li>
                        
                        <li><a href="#">Your Industry</a>
                            <ul>
                                <li>
                                    <a href="#">Government</a>
                                </li>
                                
                                <li>
                                    <a href="#">Medical</a>
                                </li>
                                                    
                                <li>
                                    <a href="#">Retail</a>
                                </li>
                                                                            
                                <li>
                                    <a href="#">Software</a>
                                </li>                    
                            </ul>
                        </li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Features</a></li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Implementation</a></li>
                        
                        <li>&middot;</li>
                        
                        <li><a href="#">Customers</a></li>
                    </ul>
                </div>
            </div>

[Dan Schulz]

I remember something about having to set position: relative where the filter is applied, but I don't recall where exactly as far as the style rule goes. Have you tried searching the forum (especially Paul O'B's posts on the subject) by any chance?

[AVdes]

Yes I've applied that, and it did work. But in doing so I inherited a new problem. that of the drop down list pushing the other menu items over when it drops down. I don't know why this happens and I'm hoping someone can shed some lite on a fix.

Thank you though.

[Dan Schulz]

Ok. I'll try rebuilding it on my end for you. Maybe I can massage the problem out of existance that way.

[Dan Schulz]

Oh brother, I'm noticing a LOT of problems here. Such as mixing unit types, using fractions of unit type values (sorry, but 8.5pt is not a valid unit measurement the last I checked)... hang on. I'm re-writing this bad boy.

[AVdes]

Actually I've found that firefox not only uses decimals with point sizes but in some cases needs them to match the sizes on other browsers. I'm not sure why though.

[Dan Schulz]

It's because Firefox doesn't obey the system metric.

[Dan Schulz]

Hmm... your image is larger than it appears to be (182px when the "visible" area is about 140px).

[AVdes]

there are two images.

drop_4.png is 182x101

drop_6.png is 182x140

[Dan Schulz]

Ok, here's a rough "sketch" of how I'd do it. I haven't added the bullets (would be best as background images on the anchors, not separate list items) or the PNG alpha transparency, but this should serve as a solid framework for what you need to do.

There are a couple accessibility issues though. You need to declare a background color on either the list itself or the links so they match the orangish color on the main background image for the menu (I served the huge image as a background on the list rather than as a separate file). Same with the dropdown anchors. And of course, people will not be able to resize the text since you're using points (which I've reproduced here).

Personally, I'd have used CSS sprites for this menu, but that's just me. Let's take a look at the code, shall we?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<style type="text/css">
 
		html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
		dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
		a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
		strong, sub, sup, textarea, tt, var {
			margin: 0;
			padding: 0;
		}
 
		body {
			background: #FFF;
			color: #000;
			font: normal 8pt/11pt arial, helvetica, verdana, sans-serif;
			letter-spacing: 1px;
		}
 
		#menu {
			background: url("http://www.avdes.com/tests/header.png") top left no-repeat;
			height: 30px;
			list-style: none;
			padding: 78px 0 0 200px;
			width: 750px;
		}
			#menu li {
				float: left;
				position: relative;
			}
 
			#menu a {
				background: transparent;
				color: #C9F3FB;
				display: block;
				letter-spacing: 2px;
				padding: 0 6px;
				text-decoration: none;
			}
 
			#menu a:hover {
				color: #49DDFD;
			}
 
			#menu li:hover ul {
				left: 0;
			}
 
			#menu ul {
				background: url("http://www.avdes.com/tests/drop_4.png") 0 -6px no-repeat;
				height: 88px;
				list-style: none;
				min-height: 1%;
				padding-top: 6px;
				position: absolute;
					left: -999em;
				width: 138px;
			}
 
			#menu .solutions {
				background: url("http://www.avdes.com/tests/drop_6.png") 0 -6px no-repeat;
				height: 140px;
				min-height: 1%;
				width: 182px;
			}
				#menu ul li {
					float: none;
					position: static;
				}
 
				#menu ul a {
					padding-left: 12px;
				}
 
	</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Overview</a>
		<ul>
			<li><a href="#">eLearning</a></li>
			<li><a href="#">Webcasting</a></li>
			<li><a href="#">Documents</a></li>
			<li><a href="#">eSales</a></li>
		</ul>
	</li>
	<li><a href="#">How It Works</a></li>
	<li>
		<a href="#">Solutions</a>
		<ul class="solutions">
			<li><a href="#">Train Your Employees</a></li>
			<li><a href="#">Train Your New Hires</a></li>
			<li><a href="#">Train Your Sales Reps</a></li>
			<li><a href="#">Train Your Customers</a></li>
			<li><a href="#">Sell Your Training</a></li>
			<li><a href="#">Compliance</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Your Industry</a>
		<ul>
			<li><a href="#">Government</a></li>
			<li><a href="#">Medical</a></li>
			<li><a href="#">Retail</a></li>
			<li><a href="#">Software</a></li>
		</ul>
	</li>
	<li><a href="#">Features</a></li>
	<li><a href="#">Implementation</a></li>
	<li><a href="#">Customers</a></li>
</ul>
</body>
</html>

You'll notice that I inlined the stylesheet, but this was only for demonstration purposes. You'll want to put the stylesheet in an external file, and then set the media type to screen,presentation since Opera will use the projection stylesheet (in this case, the same thing if you declare it) when in "full screen" mode.

For your IE 5/6 stylesheet, it'll be better to declare the conditional check as lt IE 7, rather than lte IE 6. You might be able to get away with removing the conditional comment (and the additional stylesheet and the extra HTTP ping request) by inlining the styles with the * html hack, but I'm not sure if it'll work or not since I didn't try it (I try to avoid PNG filters whenever possible). But since this is a dropdown menu using alpha-transparency PNG images, I'd go ahead and keep the stylesheet in there, but also move the JavaScript file there as well since IE 5 and 6 are the only ones that need it.

Looking at the stylesheet, you'll notice a bunch of HTML elements at the top that have been given properties of "zero margins, and zero padding". I use this instead of the universal selector nowadays (and no I don't type it all out, I just copy/paste from a base template file) since the universal selector will target EVERYTHING, including form controls, which have problems when their margins and padding are stripped from them.

Your body had the various font properties declared via the font shorthand property, which meant having to include the leading (line-height) as well. Since you had it set up for 8pt, I figured 11 should provide good enough contrast for those who can see well enough or are using a real browser capable of actual page zooming (such as Opera - sorry, but I consider IE 7's page zoom to be a half-finished job). Again, I wouldn't use points here (since they're best used for printing) but since I wasn't about to slice up that image and create some sprites for you to use, I decided to strike a deal with the Devil for once.

The menu UL has the ID of "menu" (since that's what it is). It's a menu, doesn't matter what type of course, since it's "just" a menu - it would be nice to just say that's what it is, so I did. The image you were using in the original HTML was served here as a background image, which meant having to give the container a stated height and width. I reduced the declared height and width so I could use padding on the list to push the list items down to where they appeared on your example (gotta love an additive box model, afterall).

Your list items were floated, and given a relative position, so they could contain the nested lists to be positioned absolutely (rather than using display: none; and display: block, which can cause accessibililty problems when used in this manner).

I declared the links in the menus to be display: block; so they'd take up all of the available space in their parents (the floated list items). IE 6 may require setting a height of 1% to cure "hasLayout" but I didn't check - if it does, feel free to just put it in there (in the first instance of the links should suffice).

The submenus have a min-height of 1% declared to get around an IE 7 hasLayout bug as well. I've also declared an explicit height for the submenus as well, but IIRC mixing height and min-height in the same style rule can cause some serious problems. I'm sure there are other ways to force hasLayout, but I'm not going to go looking for them. If there are any, they'll be in the CSS FAQ at the top of this board, and I strongly suggest you use them instead.

Other than that, don't forget to add in the centered bullets (the home page link may require a class to make this work in IE 6), along with active and focus states for the dropdown (you had active in your version, but I omitted it in mine), as well as either an external JavaScript file or a .htc file in your IE 6 stylesheet.

Anything else I may have forgotten or omitted I'll glady accept responsibility for.

[AVdes]

I'm sorry that doesn't seem to be working for me.

I coppied it exactly but the menu doesn't even show up. I'm not sure what I'm missing.

on the other side. I have been banging my head against the old code trying to figure out what's going wrong and I narrowed it down to one line.

/* navigation revealed */
#dropNavi li ul {
    display: none;
    left: -999em;
    height: auto;
    /*border: 1px #0099cc solid;*/
    position: absolute;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 15px;
    z-index: 10;
    }

position: absolute; - is the problem. If I leave it in then the menu works perfectly on all browsers except IE6 and I assume 5.

on IE6 it makes the links un-clickable. This is because the blank.gif for some reason is positioned over the links.

if I remove - position: absolute; - then the links work. but now in all browsers the menu jumps when you drop one down.

I wish I could just remove IE6 from existance.

[Dan Schulz]

You're talking about copying the code I gave you 100% and then not having it work in IE 6? I'm perfectly aware of that. As I said, the menu needs to have the script you were using added (along with the PNG filter). If it's still not working after that, then use the * html hack to apply a 1% height to the dropdown lists.

You also shouldn't mix position: absolute and display: none; in this manner etiher. The positioning simply removes the element from the flow (and positions it off-screen in this case), while display: none; prevents it from being rendered at all - even to screen readers. Use one or the other, but not both (for reasons I've already stated earlier, I'd go with the absolute positioning).

[AVdes]

I have learned a lot from you. Thanks for that. But I think I'm going to apply your tips to the current code instead of doing a recode. Hopefully when I clean up my code with your tips the solution will become clear. Clarity through simplification and all.

Thank You.