how to seperate categories in listing box and reduce gap between main cat and subs?

[Sushigal]

My site; http://www.thegreatgiftshop.co.uk/zencart

Hi, as you can see in my catgegories listing box, I've spaced out the categories (used other threads to help) but if a category has sub cats, theres no space bewteen these sub cats and the next main cat, as you can see 'Lifemax' looks like its almost a sub cat off 'Home accessories' Except its in bold like the other main cats.

So how can I make more of a gap before it, so its spaced out like the other main cats without having to increase the gaps else where as the spacing at the moment is perfect.

Also, there's too much of a gap between a main cat and its subs, how can I decrease this? At the moment 'Home accessories' is the only main cat with subs but this will change fairly soon.

I have limited knowledge with css so would need someone to perhaps help me with the correct code and edits in the stylesheet to achieve what I'm after.

[niccol]

The easiest way of changing this without messing with code is to alter the stylesheet a bit.

At the very bottom of your stylesheet at the moment is:

.category-top {
display:block;
/*uncomment to help with visual display
border-width:1px;
border-style:dashed;
*/
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0.1px;
}

Change it to:

.category-top {
display:block;
/*uncomment to help with visual display
border-width:1px;
border-style:dashed;
*/
padding-top:0px;
padding-bottom:0px;
margin-top:1em;
margin-bottom:-1em;
}

Note that the margin-top and margin-bottom of the element have been changed. The margin bottom is negative because it 'gets rid' of the effect of a <br> tag.

You can adjust the margin-top and margin-bottom to suit your needs. They are measured in 'em' which works better than px for all kinds of reasons. If this is confusing then it is worth searching online for an explanation of ems. Start with :

http://www.w3schools.com/css/css_units.asp

[Sushigal]

That's perfect. I had no idea that changing the unit of the value for the margins would do it.

Thanks very much for your help.

[gjh42]

Unfortunately, the negative margin-bottom causes an odd display bug in IE6. It was the first thing I tried when developing Categories Dressing to close the <br /> gap.

Cat Dressing has addressed these issues, so instead of messing with code on your own, you can install it, use the features you want, and adjust the stylesheet to your taste.

[Sushigal]

Oh not so great, but thanks for letting me know, thats a big help. I've downloaded categories dressings and will install.

Thanks!

[Sushigal]

Hi, apparently this doesnt cause a display bug in IE6, my friend just sent me a screen shot of my website viewed in IE6 and it looks fine.

[gjh42]

Yes, from my memory it looks fine, but when you scroll up or down, you get an odd skip or repeat effect depending partly on how fast you scroll. It may not happen all the time (don't remember for sure), and there may be some other factors that affect it.

[Sushigal]

Ok, well thanks very much for letting me know. No doubt I'll be getting the categories dressing mod installed anyway so can avoid this problem all together if it does occur.

[niccol]

I believe the bug only occurs when the elements have borders and the error is the way in which the border is displayed. It tends to crop out unexpected sides of the border. So, that might explain why it wasn't a good way to do it generically.

The elements here don't have borders so you should be OK unless you add borders to them.

But as ever with IE6 caution is a really good idea. Can't wait for the day when i don't need to think about IE6.

[Sushigal]

Ok thanks very much niccol. I may put the categories dressings on hold for now then as I have no need for it at the moment and am happy with the look of our categories listing box.

Thanks for all your help and advice guys