SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS drop-downs not working like they should

    Okay, here's the code...this is my first stab at a CSS-Driven drop down and it's almost there...but not quite. The top two links in the dropdown work, though they aren't formatted the way I want, but the two lower ones disappear when you get to them.

    Here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<style>
    	body {
    			behavior:url(csshover.htc);
    			background: #004a2b;
    			text-align:center;
    			font: 11px, Verdana;
    			margin: 5px;			
    		}
    		
    		* { 
    			margin: 0px;
    			padding: 0px;
    		}
    		
    		h1 {
    			font: bold 18px Arial;
    			color: #004a2b;
    			padding: .5em;
    		}
    		
    		p {
    			padding: 5px;
    		}
    		
    		#mainContainer {
    			margin: 0 auto;
    			padding: 5px;
    			width:99%;
    			background: #fff;
    			text-align:left;
    		}
    		
    		.topLog { 
    			text-align:right;
    			white-space:nowrap;
    			padding: 0 0 3px 0;
    		}
    		
    		.topLog span {
    			float:left;
    			width:5em;
    			text-align:left;
    			
    		}
    		
    		#header {
    			background: #e8e8c8;
    			text-align: right;
    		}
    		
    		#header span {
    			float: left;
    		}
    		
    /************** Navigation ********************/
    		div#nav {
    			background: url(imgs/backgrdNav.gif);
    			height: 2.6em;
    			width: 100%;
    			vertical-align:center;
    		}
    		
    		div#nav ul {
    			list-style: none;
    			padding: 0;
    			margin: 0;
    		}
    		
    		div#nav li {
    			position:relative;
    			float: left;			
    		}
    		
    		 div#nav li a {
    		 	display: block;
    			height: 2.6em;
    			line-height: 2.6em;
    			float: left;
    			width: 12em;			
    			color: #fff;
    			font-weight: bold;
    			text-decoration: none;
    			text-align: center;
    		}
    		
    		div#nav li a:hover {
    			display: block;
    			background: url(imgs/backgrdNav_orange.gif);
    			height: 2.6em;
    			line-height: 2.6em;
    			float: left;
    			width: 12em;
    			color: #fff;
    			font-weight: bold;
    			text-decoration: none;
    			text-align: center;
    		}
    		
    		/* the drop-down starts here */
    		div#nav ul li ul {
    			position:absolute;
    			width:10em;
    			left:-1px; 			
    		}
    			
    		div#nav ul li ul li {
    			width:100%;
    			border-left:1px solid #eb7c00;
    			border-bottom:1px solid #eb7c00;
    			border-right:1px solid #eb7c00;
    			background: #e8e8c8;
    		}
    		
    		/* make the drop-down display as the menu is rolled over */
    		div#nav ul li ul {
    			display:none;
    		} 
    		/* conceals the drop-down when menu not hovered */
    		div#nav ul li:hover ul {
    			display:block; 
    		} /* shows the drop-down when the menu is hovered */
    
    /************** End Navigation ********************/
    		
    		#bCrumb {
    			padding: 5px;
    		}
    		
    		strong {
    			color: #004a2b;
    		}
    		
    		#instruct {
    			position:relative;
    			padding: 0 0 0 3.5em;
    			width: 35em;
    			line-height: 1.3em;
    			color: #4c4c4c;
    			float:left;
    		}
    		
    		#filterBox {
    			border: 1px solid #ccc;
    			background: #e8e8c8;
    			width:35%;
    			margin: 0 0 0 3em;
    			padding: 5px;
    			position: relative;
    			float:left;
    		}
    /* clear method needed to keep two div's from wrapping in IE */	
    		.clear {
    			clear:both;
    		}
    		
    /************** Table Specific Tags ********************/	
    		table {
    			width: 100%;
    			border-collapse: collapse;
    		}
    		
    		caption {
    			font: bold 16px Arial;
    			color: #406940;
    			text-align:left;
    			padding: 15px 0 3px 0;
    		}
    		
    		td {
    			padding: 3px;
    			text-align:right;
    		}
    		
    		th {
    			background-color:#004A2A;
    			color: #fff;
    			text-align:right;
    		}
    		
    		.mediumgreenLabel {
    			background-color:#569264;
    			color: #fff;
    			font: bold 10px Verdana;
    		}
    		
    		.alt {
    			background-color: #E8E8C8;
    		}
    /************** End Table Specific Tags ********************/
    		
    		#footer {
    			background: #004a2b;
    			height: 35px;
    			line-height: 35px;
    			vertical-align:center;
    			text-align: right;
    			padding: 0 0 0 10px;
    			margin:5em 0 0 0;			
    		}
    		
    		#footer span {
    			float:left;
    			color: #fff;
    			padding: 0 0 5px 0;
    		}
    		
    		a:link, a:active, a:visited {
    			text-decoration: underline;
    			color: #ec7c01;
    		}
    		
    		a:hover {
    			text-decoration: none;
    		}
    	</style>
    </head>
    
    <body>
    <!-- begin content -->
    <div id="mainContainer">
    <p class="topLog"><span>You are representing <strong>Someone</strong></span>Welcome <strong>Super User</strong> | <a href="log">Log out</a></p>
    <!-- beginning header with NAV -->
    <div id="header">
    	<span><img src="imgs/agr_logo.jpg" width="148" height="75" /></span><img src="imgs/topImg.jpg" id="topImg" name="topImg" width="465" height="75" alt="Image of Sifter" />
    </div>
    <!-- end header -->
    <!-- begin nav -->
    <div id="nav">
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Position</a></li>
    			<ul> <!-- drop down menu items -->
    				<li><a href="#">Reports</a></li>
    				<li><a href="#">Purchases</a></li>
    				<li><a href="#">Sales</a></li>
    				<li><a href="#">Inventory Adjustments</a></li>
    			</ul>
    		<li><a href="#">Profiles</a></li>
    		<li><a href="#">Administration</a></li>
    		<li><a href="#">Help</a></li>
    	</ul>
    </div>
    <!-- end nav -->
    <!-- begin content area divs -->
    <div id="bCrumb"><a href="index.html">Home</a> &gt; Position Review</div>
    <div id="textFld">
    	<h1>Purchases</h1>
    	<div id="instruct">
    	<p>INSTRUCTIONS: Use the filter to view all purchase or sale transactions that have been entered for your location. Once your position report is generated, based on the specified criteria, use the buttons at the bottom of the page to add new transactions. The “Edit” hyperlink to the right of transactions that have already been entered will allow you to make any changes needed.</p>
    	<p><input type="Checkbox"> Show All Order Details</p>
    	</div>
    	<div id="filterBox">
    	</div>
    	<p class="clear"></p>
    	<div id="tableBox">
    			**table goes here **
    	</div>
    </div>
    <!-- end content area divs -->
    <!-- begin footer -->
    <div id="footer">
    	<span>Copyright &copy; 2006. All rights reserved.&nbsp;&nbsp;&nbsp;<a href="#">Contact Us</a> | <a href="#">User Agreement</a> | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></span><img src="imgs/Logo_bottom.gif" width="79" height="35" alt="" />
    </div>
    <!-- end footer -->
    </div>
    <!-- end container -->
    
    
    </body>
    </html>
    I totally don't know what's going on here...it won't even work in FF. It just displays the list-items in a line. It doesn't even hide the ones that don't need to be seen at first.

    Any help would be greatly appreciated.


    Here's what I'm going for. example
    Last edited by amidude; Sep 20, 2006 at 12:09.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't quite see what was going on without the graphics (base URL for the site would help in debugging) but my instinct tells me you may need to change this:
    Code:
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Position</a></li>
     <ul> <!-- drop down menu items -->
      <li><a href="#">Reports</a></li>
      <li><a href="#">Purchases</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Inventory Adjustments</a></li>
     </ul>
     <li><a href="#">Profiles</a></li>
     <li><a href="#">Administration</a></li>
     <li><a href="#">Help</a></li>
    </ul>
    to this:

    Code:
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Position</a>
      <ul> <!-- drop down menu items -->
       <li><a href="#">Reports</a></li>
       <li><a href="#">Purchases</a></li>
       <li><a href="#">Sales</a></li>
       <li><a href="#">Inventory Adjustments</a></li>
      </ul>
     </li>
     <li><a href="#">Profiles</a></li>
     <li><a href="#">Administration</a></li>
     <li><a href="#">Help</a></li>
    </ul>
    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm....didn't work.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, no matter what I do I can't get this to work in FF. I can get it to work in IE but that sucks. Why won't it work in FF? When I tried your suggestion of placing the </li> tag at the end of the embedded <ul> tag it wouldn't work in either browser. Is there a tutorial that will show me exactly how to do this the way I'm trying too? I haven't found a good one yet and I'm pretty sure I'm not looking in the right place.

    My goal is to do this without having to use Javascript and the only example I've found is the SuckerFish example but it uses javascript. Is this not able to happen? Am I way off base here?

    Also, the Stu Nicholls version uses the <table> tag and I don't want to use those if I can help it.
    Last edited by amidude; Sep 21, 2006 at 08:13.

  5. #5
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Suckerfish version is the way to go. This can not be done without JS abd still work in older IE. It will work in Firefox iwhtout the JS.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dang.

    I could have swore someone told me that it could be done.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the version that Eric Meyer's did...still having a few problems.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have some CSS based dropdown menus floating around here on Sitepoint. I'll dig them up for you and then add the links to this post.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much...I'm working on the Eric Meyer's version. It's slow going but it's helping me tremendously. I just needed to have a 'walk-through' for lack of a better term. I work better that way. I get shown once and then I'm good. I know...I'm kinda weird that way.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh, I just went over my CSS dropdown posts and realized how bad they really were. I guess a lot can change in one's coding habits over the course of six weeks.

    As for requiring a walk-through, you won't believe this, but I'm the same way. Plain English works best. I"m surprised that none of the "mainstream authors" have ever heard of it .

    Give me some time and I'll write one up for you. While I like the one on HTML Dog (for the most part), it DOES have a few flaws, which I'll hope to correct in my version.

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet...I'm pretty stoked now!!! I'm slowly getting there. Here is what I have so far: www.e-centricity.net/eTest/index.html

    It works in IE but not so well in FF. I think some of my modifications to the way Eric Meyers did it is causing problems. I just don't have the experience to see where.

    Any help would be greatly appreciated. Also, when I place the code into the code up at the top of this message the hover effects no longer work and the menus don't show up...lamed up or otherwise.

    Also thanks for all the help...this is getting fun now.

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't get the width to look the same in IE and FF...any suggestions?

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's something else freaky...I've got the code working to where I can see the drop-downs in both IE and FF but in "Exploder" the dropdowns show up behind a form element I have positioned close to the top of the page. It's a drop-down list using <select> and that's weird. I've tried putting a z-index on the menu so that it would show up above the drop-down list but that doesn't work. Has anyone ever run into this?

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this a stumper?

  15. #15
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get your list items' width right, #nav li needs to be width: 13em.

    You won't be able to fix your dropdown over the select problem though. You either live with it or move the select.

  16. #16
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. I appreciate it. It's my first attempt at this type of menu.

    p.s.
    Your website is awesome.

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, may I ask what I missed when determining the proper width? Is there something there that I should have caught or remembered? Sorry, I just want to know how to do these on my own and whereas I appreciate your proper calculations I just wanted to know how you got there. You know the ol' "teach a man to fish..." dealy? ;-)

  18. #18
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amidude
    Also, may I ask what I missed when determining the proper width?
    The reason I chose 13em was because that was the width of your anchors and the list item should be the same.

  19. #19
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. Man it was right in front of me the whole time. Thanks...I'm really enjoying this way of styling web sites.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •