CSS Dropdown menu for the header- With Categories!

[noleafclover614]

I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!

The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.

Added a screen shot to illustrate:


Regards,
Matt

[jettrue]

I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!

The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.

Added a screen shot to illustrate:


Regards,
Matt

It's not actually an extra "button", its just left over space. This is also answered within the thread, do a thread search (use the "search this thread" button that is next to the thread tools button) for "percentage width s".

remove the space before the "s". (this way I can tell people to use that search string, without adding a result)

[noleafclover614]

Thanks so much, I was able to find the information and fix my problem. Thank you for maintaining this thread for so long, you are awesome man.

--Matt

[noleafclover614]

Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...





Any thoughts?

[jettrue]

Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...





Any thoughts?

when you centered the menu, what percentage did you use? You can use the exact percentage, you have to round down a smidge so it doesn't break in IE

[noleafclover614]

Here, I have included the code from my CSS: ( I believe I used 16.667% )

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}


/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
#dropMenuWrapper {
	width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:70em;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
        width:16.667%;
	}
	
div#dropMenu ul.level1 {
	width:70em; 
	margin:0 auto; 
	text-align:center;
	background:#4F4F4F;
	height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.) Thanks again for your quick reply.

[jettrue]

Here, I have included the code from my CSS: ( I believe I used 16.667% )

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}


/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
#dropMenuWrapper {
	width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:70em;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
        width:16.667%;
	}
	
div#dropMenu ul.level1 {
	width:70em; 
	margin:0 auto; 
	text-align:center;
	background:#4F4F4F;
	height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.) Thanks again for your quick reply.

Right, that's why I said round down a *smidge*. Try 16.66 or thereabouts

[noleafclover614]

Thanks for your input.

Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself.

[jettrue]

Thanks for your input.

Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself.

Well, you're going to have to make it low enough that the line doesn't break. So what I would make it as small as it can get without breaking, and get rid of the right line, so you can't tell that there is extra space leftover.

To do that, open up includes/templates/YOUR_TEMPLATe/common/tpl_drop_menu.php

and replace the entire shopping cart section with this:

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
</ul>
</li>
<?php } else { ?>
<li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>

[noleafclover614]

Tried your suggestion, replaced the code, and now it seems to have shrunk the size of the leftover space to a very small gray sliver, but it's still visible