Support for CSS Flyout Menu

[wirefram]

I installed the menu in my left column my problem is the menu moves at the middle of the page when i select a link....

how can i stop this?

Thanks

[Get Em Fast]

You got a link for us to look at this?

[wirefram]

No link, the site is local on my computer and it bothers me as I don't want to go live with this problem.

I already installed your menu here and it's working fine:

http://www.bijouxpierres.com


On the site having menu trouble I use specific add ons that i don't use on the other like:

Fast easy check out which requires Css_javascript_loader

and I wonder if the Css loader is the reason of the problem, this is my best bet as your menu and this add on are both CSS related.

[wirefram]

i forgot to add, viewing the page with Explorer 6 the menu doesn't move, it does move with Firefox 1.3.9...

[sportbiker]

Great mod, but I have one issue, probably of my own making. In short, I want to use a background gradient image instead of a solid color on the menu items. I'm noticing in Safari and Internet Explorer, the background image seems to get "offset". I'm sure it's a padding or margin issue, but I'm stumped.

I've attached a screenshot and my CSS. If you can spot the problem, please let me know. I'm going in circles on this one.

#categoriescss.leftBoxContainer { 
   background-color: transparent;
   width: 175px; 
   padding-bottom: 10px;
   margin-top:0px;
}

#categoriescssHeading.leftBoxHeading {
   background: url(../images/blue-background.jpg); background-repeat:repeat; 
   border-bottom: 1px solid #000; 
   margin-bottom: 1px;
}

#nav-cat {
   width: 175px; 
   margin: 0 0 0 0px;
   background-image: url(../images/arrows/grey-button.jpg); 
   background-repeat:repeat;
   font-weight:bold;
}

#nav-cat ul {
   margin: 0; 
   padding: 0; 
   width: 175px; 
   background: url(../images/arrows/grey-button.jpg); 
   background-repeat:repeat-x;
}

#nav-cat ul.level2 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level3 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level4 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level5 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level6 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}

#nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   border-bottom: 1px solid #000;
   background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;
}

#nav-cat li li {
   margin: 0; /* overrides the margin-top above */
}
 
#nav-cat li:hover {
   z-index: 1000;
   color:#FF0;
}

#nav-cat li a:hover {
   color: #FF0;
   background-image:url(../images/arrows/hover-button.jpg);
   background-repeat:no-repeat;
}

#nav-cat li.submenu {
   background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
   background-repeat:no-repeat;
   background-position:right;
}

#nav-cat li.submenu:hover {
   	background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
	background-repeat:no-repeat;
   	background-position:right; 
}

#nav-cat li a {
   display: block; 
   padding-top: 0.25em; /* Originally .25em */
   padding-right:0em;
   padding-bottom:.25em; /* Originally .25em */
   padding-left:.5em;
   text-decoration: none; 
   width: 100%; 
   color: #fff;
   
}

#nav-cat>ul a {
   width: auto;
}

#nav-cat ul ul {
   position: absolute; 
   top: 0; 
   left: 175px;
   display: none;
}

#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
   display:block; 
   border-left: 2px solid #d########3;
   background: url(../images/arrows/hover-button.jpg);
   background-repeat:repeat;
}

[gjh42]

viewing the page with Explorer 6 the menu doesn't move

IE6 had a ton of CSS bugs and shortcomings. The only reason to still be using that version is if you have a Windows 2000 operating system which is unable to run any newer IE (other modern browsers work fine on it), or you work for a company that requires all of its computers to use IE6.

[gjh42]

I can't troubleshoot a screenshot. If you can't let us see the site directly, you'll have to wait for Get Em Fast (who knows the mod thoroughly) to show up.

[sportbiker]

Sure, the site's a work in progress, but you can check out what I'm trying to achieve at:

http://store.ruggedradios.com

Thanks for the help!

[Soniccc]

I'm getting a lot of end tag for "ul" which is not finished warnings with the WC3 Markup Validation Service. Is this normal?
Thanks

[Soniccc]

I meant:

I'm getting a lot of "end tag for "ul" which is not finished" warnings with the WC3 Markup Validation Service. Is this normal?
Thanks

www.test.soundfactory.nu