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

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.

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

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. :clap:

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.

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

Thanks! :smile:

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.

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.

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.

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.

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 :smile:

Well as I say IE6 display bugs are slippery and elusive so playing safe is definitely the way to go. Gjh is more experienced than I am so I might heed his advice.

If you choose to go with what you have I would find a way to test it VERY thoroughly on IE6. That would involve loading on as many different machines as is feasible and scrolling up and down and tring to do as many things as you can think of, definitely including hovering over links and changing the window size, to try and flush a bug out.

The little critters are sneaky and sometimes intermittent.

You could search online for IE display bug and start at:

http://www.positioniseverything.net/explorer.html

Roll on the days when IE6 is put in its grave!