Categories Dressing

[gjh42]

I can't even install IE7 on my home computer (Win2k). I just looked in IE6 and I see the 1_29 group with the same line spacing as the 1_26 group, but the whole thing about 5px higher than it should be. Guess it's time for some IE conditional code or hack, or an IE-only supplemental stylesheet (there is a mod in Free Addons for this).

[limelites]

I do have an IE only stylesheet.... maybe I need an IE6, IE7 and IE8 sheet!! With compatibility mode off in IE8, the right column group 1_29 is sitting a few pixels lower than the left (even though I'm using a separate IE stylesheet for this, changing the position up a few pixels makes no difference whatsoever...it affects the position in compatibility mode but not in IE8 raw.)

[limelites]

Nope can't figure this one out at all. I hate IE

I reverted back to your first code and this seems to cure the IE8 issues.

So, I used this instead:

#catGroup1_26 li {width: 70px;}

#catGroup1_29 {
position: relative;
width: 70px;
height: 0;
top: -77px;
left: 70px;
}

but I have to add this to IE7 stylesheet:

#catGroup1_29 {top: -84px;}

The trouble I still get is with IE8 in compatibility mode, the line-height seems to be much smaller than the 1_26 group. I've tried adding a line-height:1.5em; to the IE7 stylesheet but I can see from the IE8 developer tool that it's crossed out immediately as though it's being overridden.... I'll move this to a new thread Glen as it's starting to get off topic.

[ryanb4614]

possible to hide this mod (category sidebox) on just the main/home page?

[gjh42]

See the tutorial: I want to suppress the display of some of my sideboxes on my front page, but still have them show on all other pages.

[ryanb4614]

can't seem to get that to work thanks anyways

[smoke133]

Is there a way to have it so that the background image for the category images some how be set up to use sprite images? I see that you have to name each image for every category that you want a image for with it's category cPath. I want to set it up so that I can use one image and tell the image position based off of the category cPath. This would create fewer HTTP requests on the sever.

[smoke133]

I was also wondering if there is a way to fix it for the categories that are too long to stay on one line. I want to align the text for the second line with the first line.

[gjh42]

For the alignment, you will need to change the list-style from inside to outside, and then give the list items more left margin.

#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 2.3em; /*adjust to taste*/
    padding: 0;
    }

Repeat for subcategories. Note - the margin might need to be applied elsewhere - I haven't tested this yet.

Using sprites would require fundamentally changing the way category name/image replacement works - the code uses the individual names as triggers for the replacement to happen automatically, and only when there is an image to use. Sprites would require essentially hard-coding for the particular set of categories. So while it would be very nice to reduce the number of image calls, it's not going to happen any time soon unless you want to rework the code.

[smoke133]

For the alignment, you will need to change the list-style from inside to outside, and then give the list items more left margin.

#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 2.3em; /*adjust to taste*/
    padding: 0;
    }

Repeat for subcategories. Note - the margin might need to be applied elsewhere - I haven't tested this yet.

When I do this all that happens is it pushes the bullet to the left. It does not align the two lines of text up with each other.

Also, I was wondering. When you are using the option to hide the top category when viewing a subcategory. Why does the top category comes back when you go to view one of the products? Is there a way to still hide the top category when you are viewing the products?