CSS Dropdown menu for the header- With Categories!

[Redcinamn]

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

[Edm]

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.

[Redcinamn]

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

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

[Redcinamn]

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;
    }

[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

[jettrue]

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.

[jettrue]

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:

<li><a href=http://www.wpc-consulting.com/~stxmill/ '', 'NONSSL'); ?>Home</a></li>

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.

[jettrue]

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/showth...ic+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.

[jettrue]

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.

[Redcinamn]

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

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.