In my categories widget I have main categories and sub-categories which are indented by a few px.

The whole widget area is boxed with a border.

I want to add a bottom border (a light dotted line) so that the different categories are more clearly defined. I have added the following code to the "Add HTML/CSS Inserts" section -

 div.widget ul li {border-bottom:1px dotted #DEEDEF;
		}

The only problem is that these bottom borders are also indented, see image below (I have changed the lines to red here to make it clearer what I am talking about)

I actually want them to stretch from the left border to the right, can someone please advise how I achieve this, without affecting the indentation of the text?
Also is it possible not to have the double lines where sub-categories end and a new category starts?

Thanks
Gill

Originally Posted by GillM

<...>
The only problem is that these bottom borders are also indented, see image below (I have changed the lines to red here to make it clearer what I am talking about)

I actually want them to stretch from the left border to the right, can someone please advise how I achieve this, without affecting the indentation of the text?

Without having tried it our or having looked into it extensively .. id expect this would help:
http://www.w3schools.com/css/pr_border-bottom_width.asp

could set it to a fixed with manually.
or if really needed .. in case its dynamic .. get the width of the parent category with javascript and copy it to the subcategory's border-bottom_width.

Also is it possible not to have the double lines where sub-categories end and a new category starts?

Thanks
Gill

Seems more complex .. might need some conditional CSS with is not supported my most browsers yet. But perhaps there's an easier fix. Would help if you would have given an URL .. as explained in the stickies .. as it makes it easier for others to help you with an answer.

Thanks for the reply - I will checkout your answers. Sorry I omitted the URL to the development site, here it is

Gill

Border width is really border thickness. This was kind of a fun exercise. Try this with the appropriate colors.

div.widget ul li ul li {
border-bottom:1px solid black !important;
margin-left:-10px !important;
padding-left:20px !important;
}

Originally Posted by lmilesw

Border width is really border thickness

Arggh .. my bad

Props to lmilesw