Web Analytics Made Easy -
StatCounter Dropdown inherits container's non-absolute width - CodingForum

Announcement

Collapse
No announcement yet.

Dropdown inherits container's non-absolute width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Dropdown inherits container's non-absolute width

    I am coding a drop down menu, and so far I have got it working in everything but IE6. (Note: This is a multiple UL LI navigation) The container has a width that extends depending on the content and has a position of relative. The drop down menu has an absolute position. I need this drop down menu to have a width the same as the container.

    In firefox this can be achieved by putting width:100% in the drop down menu, but in IE6 this just makes it stretch all the way to the end of the main container (odd).

    This is a client website and we already force enabling of JS for other various things, so I've been trying to work a jquery on ready based solution (which has failed so far), I just wondered if anyone else had any ideas?

    Many thanks,
    Tom

  • #2
    Hi Tom,

    Welcome to CF!

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

    Comment


    • #3
      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 :\

      Comment


      • #4
        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!
        matt | design | blog

        Comment

        Working...
        X