Printable View
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:
http://www.thechophaus.com/images/toolong.gif
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".Quote:
Originally Posted by noleafclover614
remove the space before the "s". (this way I can tell people to use that search string, without adding a result)
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
Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...
http://www.thechophaus.com/images/ie_prob.JPG
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 IEQuote:
Originally Posted by noleafclover614
Here, I have included the code from my CSS: ( I believe I used 16.667% )
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.Code: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;}
Right, that's why I said round down a *smidge*. Try 16.66 or thereaboutsQuote:
Originally Posted by 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. :shocking:
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.Quote:
Originally Posted by noleafclover614
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 } ?>
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 :cry: