Changing the list-style to outside and giving the anchors some left margin will do it, but that will also cut off the left edge of the background color if you have one. If the background is not differentiated you should be fine. Gotta run.
Printable View
Changing the list-style to outside and giving the anchors some left margin will do it, but that will also cut off the left edge of the background color if you have one. If the background is not differentiated you should be fine. Gotta run.
Thx for quick reply. Got that "outside" working changing these two parts:
#categories ul a {/*top categories*/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}
#categories ul ul a {/*subcategories*/
display: list-item;
list-style: circle outside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: none;
border: none;
margin: 0;
padding: 0;
}
:clap:
However cannot find the place where to specify the margin you mentioned. Background is no problem. :no:
Quote:
Originally Posted by wow11111
Got it... was just here:
#categories ul a {/*top categories*/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: no-repeat;
border: none;
margin: 0 0 0 1.7em;
padding: 0;
}
#categories ul ul {/*subcategories*/
list-style: none;
background: none;
border: none;
margin: 0 0 0.4em 2.2em;
padding: 0;
}
The last level shown in the menu are products. Is there a way to get them a bit more left ? All I could adjust only affects categories and subcategories and always moves the products too.
There are no products in the categories menu unless you have some mod installed. What do you have that does that? Clyde Jones' Expanded Categories? That one shows products too, but I wasn't aware that it could be used with Cat Dressing.
To affect sub-subcategories, repeat the ul ul rule for #categories ul...
#categories ul ul ul {/*sub-subcategory list*/
and
#categories ul ul ul a{/*sub-subcategories*/
Perfect, THX. Got it now. :clap:
in the stylesheet when it says:Quote:
Originally Posted by wow11111
alter to read:HTML Code:list-style: disc inside url(../images/bullet1.gif);
HTML Code:list-style: disc url(../images/bullet1.gif);
Thanks again for that! I just tried out your files and they work in my installation just as they should - every list is standard conform to w3c - now we ready as Standardistas! Thanks a lot! Three little greens in my browser window at the right now! I'm happy.Quote:
Originally Posted by gjh42
hey Glenn,
got hopefully a quick one for ya...
www.customk9design.com/catalogzen
in FF, Opera, Safari and Google:
have SMALL space between "harnesses" and "saddlebags" that isnt anywhere else...
in IE:
have a larger space between each category...
any solutions?
here is my pertinent css, let me know if you need additional info:
Code:/**
* CSS Stylesheet for Categories Dressing examples
* @copyright Copyright 2009 Glenn Herbert
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.gnu.org/licenses/ GNU Public License V3.0
* Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
*/
/*
hr.catBoxDivider1 {
color: #aabbcc;
}
*/
/*IE6 hacks*/
* html #categories li, * html #categories li a {
height: 1em;/*fix IE6 whitespace bug*/
background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
}
/*.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
/* padding: 0.3em 0.4em;
margin: 0;
} */
/*.catBoxHeading2 {
font-family: 'times new roman', serif;
font-weight: bold;
font-size: 1.4em;
color: #335544;
background-color: #ffaaff;
/*background-image: url(../images/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
/* padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}
/*.catBoxHeading3 {
font-family: 'comic sans ms', sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #336699;
background-color: #ffbbdd;
/*background-image: url(../images/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
/* padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}
/*.catBoxHeadingImg {
padding: 0;
margin: 0;
}
/*.catBoxSubtext1 {
font-family: 'times new roman', serif;
font-weight: normal;
font-size: 1.2em;
color: #669911;
background-color: #ffddff;
padding: 0.1em 0.2em 0.1em 1.0em;
}
*/
#categories ul {/*top categories*/
list-style: none;
background: none;
border: 0px solid #ffaa99;
margin: 0 0 0 0;
padding: 0;
}
#categories ul a {/*top categories*/
display: list-item;
list-style: none;/*change to list-style: none; to remove bullet*/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}
#categories ul ul {/*subcategories*/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories ul ul a {/*subcategories*/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
}
/*change bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
}
/*change bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
}
/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
list-style: none;
display: block;/*fix IE6 margin-left bug*/
}
/*different bullet for links if desired*/
/*
#categories li a.category-links {
list-style: disc inside url(../images/bullet4.gif);
}
*/
/* top category hover effects*/
/* #categories li.cat-top a:hover {
background: #000000 url(../images/catbghover.gif);
} */
/* subcategory hover effects*/
/* #categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
color: #aa9966;
background: #000000 url(../images/catbghover.gif);
} */
/*individual page rules go after the general rules*/
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg1:hover {
background-position: -167px 0;
}
#categories li a.catBg2 {
background: url(../buttons/english/catbg2.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg2:hover {
background-position: -167px 0;
}
#categories li a.catBg3 {
background: url(../buttons/english/catbg3.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg3:hover {
background-position: -167px 0;
}
#categories li a.catBg4 {
background: url(../buttons/english/catbg4.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg4:hover {
background-position: -167px 0;
}
#categories li a.catBg5 {
background: url(../buttons/english/catbg5.gif) 0 0 no-repeat;
height: 28px;
}
#categories li a.catBg5:hover {
background-position: -167px 0;
}
#categories li a.catBg6 {
background: url(../buttons/english/catbg6.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg6:hover {
background-position: -167px 0;
}
#categories li a.catBg7 {
background: url(../buttons/english/catbg7.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg7:hover {
background-position: -167px 0;
}
#categories li a.catBg8 {
background: url(../buttons/english/catbg8.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg8:hover {
background-position: -167px 0;
}
#categories li a.catBg9 {
background: url(../buttons/english/catbg9.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg9:hover {
background-position: -167px 0;
}
.catCount {color: #000000;}
Hello customk1!
I'm not Glenn, but ...
I can see, that there IS indeed a small transparent image between these categories:Quote:
Originally Posted by customk1
<img height="100%" width="100%" title="Harnesses" alt="" src="includes/templates/template_default/images/pixel_trans.gif"/>
Perhaps you can check that?
Also perhaps: I cannot try this but I know that margin and padding must be set to 0 for <li>, to achieve a consistent appearance throughout all browsers. Otherwise every browser makes his own margins/paddings to block elements.Quote:
Originally Posted by customk1
i added:
margin: 0 0 0 0;
padding: 0 0 0 0;
to the 1st four li items:
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 27px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg1:hover {
background-position: -167px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
etc....
no change to the padding in IE. still trying to find that pixel.gif file... will let u know if i have no luck.