Before anybody points out that this thread would be better posted in the add-on specific thread, let me explain that the original creator of the module, DrByte, does not offer support for this module (no offense meant, Doc, probably very busy).
This contrib was later updated by Get Em Fast, who also deserted it, so I am hoping to reach a larger audience of stylesheet gurus who can help me out.
The contrib works fine in IE7 and FF, though barely in IE6.
You can take a look at the site in the sig to see what I mean.
Also, in the support thread http://www.zen-cart.com/forum/showth...=686768&page=9 you will find more info on tweaks I had to make to the stylesheet to achieve something barely visible in IE6.
There is no hover functionality in IE6, although the file that produces the hover (csshover.htc) is correctly called in the stylesheet, but this is an issue that I will address later.
For the moment, let's focus on the style thing.
An element "a" with these ancestors:
html
body #indexBody
div #mainWrapper
table #contentMainWrapper
tbody
tr
td #navColumnOne .columnLeft
div #navColumnOneWrapper
div #categoriescss .leftBoxContainer
div #nav-cat
ul .level1
li
is breaking the sidebox (information taken from Web Dev toolbar).Web Dev reports that this element has
Width: 160pxHeight: 28px
however I have specified a different size for it in the stylesheet.
Next comes the relevant stylesheet.
If anybody can make sense of it, I'd greatly appreciate it and so would the other users of this contrib.
Thanks in advance.
-----------------------------------------------------
body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}
div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}
div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level3 {
background-color: transparent;
}
div#nav-cat ul.level4 {
background-color: transparent;
}
div#nav-cat ul.level5 {
background-color: transparent;
}
div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}
div#nav-cat li.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {
background-color: transparent;
}
div#nav-cat ul {
background-color: transparent;
}
div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
div#nav-cat li a:hover {
border: none;
}
div#nav-cat>ul a {
width: 150px;
}
div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}



