CSS Dropdown menu for the header- With Categories!

Well I spoke to soon and I forgot to check the dreaded IE .
See here: http://www.auto-xtras.net/shop/

It is wrapping is there something I need to add to the CSS? to have it not do this in IE.

~Renee

Hi Renee,
"Nice", except I personally find the text a bit hard on the eyes, a bit glarie and the small font style (my two bobs worth). As for the wrap I experienced the same thing for small resolution. Unsure of what you can do, sorry.

Thanks, Site is for a customers design :)
And the customer is always right! :cool:

I have been trying an earlier post referring to em to px but when I tried that it cut off half the bar as well still wrapping so I am still lost.

~Renee

Here is my style sheet and what I have done from looking at previous post but no luck with centering or wrapping in IE . Any help would be appreciated.
So you know my text is set to 70.5 but would need to be 72.5 .

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;}
*/
    
div#dropMenu {
    width:899px;
    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%;
    *width:16.649%;
    }
    
div#dropMenu ul.level1 {
    width:899px;
    margin:0 auto; 
    text-align:center;
    background:#4f4f4f; /*background color of top menu when NOT selected. */
    z-index:1000;
    float:left;
    }

div#dropMenu li a {
    display: block;
    /* Hides from IE5-mac \*/
    height: 1%;
    /* End hide from IE5-mac */ 
    padding: .6em 2px .6em 2px;
    text-decoration: none; 
    text-transform:uppercase; 
    color:#ffffff; 
    text-align:center; 
    border-right:1px solid #ffffff;
    }    
    
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.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{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;}

.clearBoth {
    clear:both;
    height:0;
    font-size:0;
    line-height:0;
    }

Anyone? I would greatly appreciate as the changes I keep trying to make make no effect in IE. and I have played quite a bit.
~Renee

Redcinamn:

Anyone? I would greatly appreciate as the changes I keep trying to make make no effect in IE. and I have played quite a bit.
~Renee

You can try making this smaller little by little till it stops:

*width:16.649%;

but the font is probably too big, and will wrap no matter what. IT barely fits in Firefox, and IE always makes fonts a bit bigger by default.

welchyboy:

I have a strange problem however it only happens on certain computers and i am trying to figure out why. Everything works great on certain computers however for some reason on random computers that i get on and check the site the menu will have red "X's" to the left. Which is probably the blank box but why are there red x's. Only on certain computers. I was also wondering how can i set the page to where it looks the same on ALL computers. for example on the site i have the background of the site a picture and the center box is smaller so you can see the background. Well this center box has for example set to something like 840px or something. But on computers with different resolution the gap will be either bigger or smaller. How can i make this appear the same on all computers with different resolutions.

The site is

http://wpc-consulting.com/~stxmill/

There's something wrong with your HOME link, if you view the source of your site, your home link looks like this:

Fix the home link, and I bet all will be well. Compare your home link now to what the home link used to be, and you'll be able to fix it.

jamesdavid:

This is my current menu (i cant take a screen grab while hovering so i’ve photoshoped it, but you get the idea);
http://www.jameschetwood.com/css/men1.jpg

This is the menu Im trying to make;
http://www.jameschetwood.com/css/men2.jpg

How can i get the text for each link in the fly out menu to alight to the right of ‘More Gems’?

I made this with
css_horizontal_dynamic_menu_pauls_edition_1-1 but its very similar to this mod.

Ive also posted this here;
http://www.zen-cart.com/forum/showthread.php?t=68676&highlight=css+horizontal+dynamic+menu&page=2

Please let me know if this is a breach of forum etiquette.

Could I see a link to the actual site? I can't answer from just an image. :smile:

Edm:

Hi Jade,
Love this drop menu, Can you please tell me how to remove the Nav menus (home/login) from the header, as the only ones I want on the top of the page are in your drop menu.

Open up includes/templates/apple_zen/common/tpl_header.php and remove them there.

Thank you , Thank you , Thank you ! that worked the font is only a little larger than what was there and works perfect, it wasn't working with the original untouched font either so altering that percentage worked perfectly. What an amazing mod I am so thrilled to get to use it and again thank you very much!
~Renee

jettrue:

You can try making this smaller little by little till it stops:

*width:16.649%;

but the font is probably too big, and will wrap no matter what. IT barely fits in Firefox, and IE always makes fonts a bit bigger by default.

How can you make your top categories so when you are on there page (after you click them) they change colour?

its not using this menu but this site does what im talking about;
http://www.inksale.com/index.php?mai...index&cPath=32

When you are on the categories page the link goes turquoise blue. Whats also cool but probably harder is that the link stays a different colour when you are in one of its sub-categories.

Thanks for the advise Jade.
Regards
Eddie

jamesdavid:

How can you make your top categories so when you are on there page (after you click them) they change colour?

its not using this menu but this site does what im talking about;
http://www.inksale.com/index.php?mai...index&cPath=32

When you are on the categories page the link goes turquoise blue. Whats also cool but probably harder is that the link stays a different colour when you are in one of its sub-categories.

I know what you're talking about, but its not possible, not in the way zen cart handles links. There may be some way to do it via javascript, but I haven't the time or inclination to try to implement it, sorry!

Thanks anyway for the answer.
james

I changed the Home link to <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
It didn't seem to change anything. I changed this link in the tpl_drop_menu.php and it seems to not have made any difference. Also if you could look at my photo gallery page...I am not sure why but the flash gallery on some computers seem to be larger than normal and dont work. However on my computer and work and home it works perfectly. Any ideas....

welchyboy:

I changed the Home link to <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
It didn't seem to change anything. I changed this link in the tpl_drop_menu.php and it seems to not have made any difference. Also if you could look at my photo gallery page...I am not sure why but the flash gallery on some computers seem to be larger than normal and dont work. However on my computer and work and home it works perfectly. Any ideas....

Another error I found...

<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">

      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           
            

            [B]</li>[/B]
            <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
			<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=about_us&zenid=842e7cd1b8848968bcba00eb132c766a">About Us</a></li>
				<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=history&zenid=842e7cd1b8848968bcba00eb132c766a">HISTORY</a></li>

					<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=fund_raising&zenid=842e7cd1b8848968bcba00eb132c766a">FUND RAISING</a></li>
						<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=the_windmill&zenid=842e7cd1b8848968bcba00eb132c766a">THE WINDMILL</a></li>
							<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=photo_gallery&zenid=842e7cd1b8848968bcba00eb132c766a">PHOTO GALLERY</a></li>
								



        </div>
      </div>
    </div>
  </div>

</div><!-- end dropMenuWrapper-->

You have an </li> at the beginning of it, which needs to go, and its missing the closing </ul>.

OK I have fixed that and cleared my cache and reloaded the page unfortuantley still doing the same thing...Do you see the red x's on your PC? It is very strange why would it work on my computer but not not work on the majority of others? I appreciate you looking over this for me. Let me know if you spot anything else that i can try to see if we can get this sorted out. Again thanks for everything.

Jade could you look at my site in IE and tell me whats going on with it. I mean the drop down menu looks good in FF but when you point your mouse at home in IE there is a white space on the right of the menu. I don't know whats going on. Thank for your help.

My site

Hi Jade'
Well did what you said all good thanks. I have a different problem, I thought it was in SmartBG whowever I have uninstalled both SmartBg and CSS Drop from my files then reinstalled, this time SmartBg first (header_bg) all good, different images loading correct. Installed CSS Drop and my SmartBg header images repeat down my page.
Can you please check my code and see what you think.
tpl_header

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.jpg'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.jpg'))?'_' . $current_page_base:'';
}?>
<!--/Smart Backgrounds-->
<div id="headerWrapper" class="smartBG<?php echo $smart_image;?>">

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
</div>

<!--eof-branding display-->

<!--bof-navigation display-->
<div id="navMainWrapper">
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<div id="navMain">
    <ul class="back"> 
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->



<?php } ?>

stylesheet_css

body 

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

	
div#dropMenu {
	width:100%;
	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%;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#800302; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac \*/
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: .6em 0; 
	text-decoration: none; 
	text-transform:uppercase; 
	color:#ffffff; 
	text-align:center; 
	border-right:1px solid #ffffff;
	}	
	
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.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{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;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
{
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3B3B39;
	background-color: #FFFFFF;
	background-image: url(../images/body_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3B3B39;
	text-decoration: none;
	}
 
a:visited {
	color: #3B3B39;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #666666;
	}

a:active {
	color: #000000;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 3px;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;

	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #7e0202;
	background-color: #fbf6d5
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	background-color: #7e0202;
	color: #FFFFFF;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9A9C86;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {

	text-align: left;
	width: 842px;
	vertical-align: top;
	background-image: url(../images/mainwrapper_tile.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}

#logoWrapper {
    background-color: transparent;
    height:282px;
	}
	
#headerWrapper { background-image: url(../images/smartbg.jpg);}

#headerWrapper.smartBG_contact_us { background-image: url(../images/smartbg_contact_us.jpg);}

#headerWrapper.smartBG_privacy { background-image: url(../images/smartbg_privacy.jpg);}

#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.jpg);}
    background-repeat: no-repeat;
}

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	margin: 0em;
	margin-top: 15px;
	}
	

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#tagline {
	color:#ffffff;
	font-size: 1.4em;
	font-weight: bold;
	text-align : right;
	vertical-align: middle;
	padding-right: 30px;
	padding-top: 60px;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

Note:

#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.jpg);}
    background-repeat: no-repeat;

Does not stop it from repeating, any advise greatly appreciated.

Kind Regards
Eddie

Does anyone know with line of code in the CSS would be used to change the width of the drop down menu?

thanks