Announcement

**BoldUlysses** · Apr 15, 2009, 09:48 AM

Hi Tom,

Welcome to CF!

Please provide your code (in [CODE][/CODE] tags) or a link to your page (preferable)

**moitio** · Apr 15, 2009, 09:57 AM

Code:

#mainnav{
	background: url(../nimages/bg-tabs.png) repeat-x bottom;
	height:38px;
	margin-right:1px !important;
	margin-right:0px;
    position:relative;
    z-index:99;
}
#mainnav  li.toplvl{
	background: url(../nimages/bg-mainnav-right.gif) no-repeat top right;
	display:block;
	float:left;
	height:38px;
	margin-left:5px;
    position:relative;
    width:auto;
    z-index:99;
}
#mainnav li.toplvl a.toplvl{
	background: url(../nimages/bg-mainnav-left.gif) no-repeat top left;
	display:block;
	float:left;
	height:28px;
    z-index:99;
	padding:7px 40px 3px 40px;
}
#mainnav ul.secondlvl{
	background: url(../nimages/bg-secondlvl-nav-right.gif) no-repeat bottom right;
	position:absolute;
    z-index:99;
    left:0px;
    top:38px;
    width:100%;
    margin-left:4px;
}
#mainnav li.secondlvl{ 
    background: url(../nimages/bg-secondlvl-nav-left.gif) repeat-y bottom left;
    padding:3px;
    position:relative;
}
#mainnav li.secondlvllast {
    background: url(../nimages/bg-secondlvl-nav-left-corner.gif) no-repeat bottom left;
}

Code:

<div id="mainnav">
    <ul class="toplvl">
        <li class="toplvl">
        	<a href="home.php" class="toplvl">Home</a>
        </li class="toplvl">
        <li class="toplvl">
        	<a href="summary.php" class="toplvl">Page 2</a>
            <ul class="secondlvl">
            	<li class="secondlvl">
                	<a href="summary.php" class="secondlvl">Summary</a>
                </li>
                <li class="secondlvl">
                	<a href="summary.php" class="secondlvl">Search</a>
                </li>
                <li class="secondlvl">
                	<a href="summary.php" class="secondlvl">Month End</a>
                </li>
                <li class="secondlvl secondlvllast">
                	<a href="summary.php" class="secondlvl">Custom Charts</a>
                </li>
            </ul>
		</li>
        <li class="toplvl">
        	<a href="page3summary.php" class="toplvl">Page 3</a>
        </li>
    </ul>
</div>

It's quite difficult to post a link as it's an internal client site, and we can't let any competitors see it. Sorry :\

**BoldUlysses** · Apr 15, 2009, 11:31 AM

I'm familiar with the IE6 problem you describe, and while someone else may chime in with a solution, I've not yet been able to find one.

The only partial solution I could think of would be to give the key top and second-level menu elements their own class with a set width, with all the other menu elements still having their widths defined by the width of their contents, as intended.

Here's my test page for you:

Code:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Untitled</title>
	
	<style type="text/css">	
	
		* {
			margin:0;
			padding:0;
		}
	
		ul {
			list-style:none;
		}
	
		#mainnav {
			background: #eee;
			height:38px;
		}
		#mainnav li {
			float:left;
			position:relative;
		}
		
		#mainnav li a {
			background: #ccc;
			display:block;
			height:28px;
			padding:7px 40px 3px 40px;
		}
		
		#mainnav li ul{
			background: #aaa;
			position:absolute;
			left:0px;
			top:38px;
		}
		
		#mainnav li ul li { 
			float:none;
		}
		
		#mainnav .secondlvllast {
			background: #888;
		}
		
		[ICODE]#mainnav .set_width {[/ICODE]
			[ICODE]width:10em;[/ICODE]
			[ICODE]border:1px solid #f00;[/ICODE]
		[ICODE]}[/ICODE]
		
	</style>
	
</head>

<body>

	<ul id="mainnav">
		<li><a href="home.php">Home</a></li>
		<li><a [ICODE]class="set_width"[/ICODE] href="summary.php" class="toplvl">Page 2</a>
			<ul>
				<li><a [ICODE]class="set_width"[/ICODE] href="summary.php">Summary</a></li>
				<li><a [ICODE]class="set_width"[/ICODE] href="summary.php">Search</a></li>
				<li><a [ICODE]class="set_width"[/ICODE] href="summary.php">Month End</a></li>
				<li><a [ICODE]class="set_width"[/ICODE] class="secondlvllast" href="summary.php">Custom Charts</a></li>
			</ul>
		</li>
		<li><a href="page3summary.php">Page 3</a></li>
	</ul>
	
</body>
</html>

Of note:

- When making dropdowns, I like to remove as many classes and IDs as possible and let the CSS nesting do the work for me. Makes the markup less cluttered.
- Don't apply styles to the lis. They're just container elements--float them left and leave it. Apply styles to the links (<a>) inside instead.

I know the test page still doesn't look quite right in IE6, but hopefully it'll give you some ideas to work with. Good luck!

Announcement

Dropdown inherits container's non-absolute width

Dropdown inherits container's non-absolute width

Comment

Comment

Comment