category sidebox margin problems

[sonicparke]

I'm having a problem in IE with the last link in the category box. I added some padding to all the sideboxes and when I did that it looked great on all the sideboxes except the category box. The link in there balooned up exponentially it seemed. So I countered that with a negative bottom margin. That fixed it except in IE it cuts off the last link significantly.

Here's the code I added for sideboxes:

/*sidebox link formatting*/
.sideBoxContent ul li a:link, .sideBoxContent a:link {
	width: 143px;
	display: block;
	padding: .1em;
}

.sideBoxContent ul li a:visited, .sideBoxContent a:visited {
	width: 143px;
	display: block;
	padding: .1em;	
	color: #C0BFAB;
	text-decoration: none;
	border-bottom: 1px dotted;
	border-color: #FF0000; 
}

.sideBoxContent ul li a:hover {
	background-color: #b7d2d9; 
	text-decoration: none;
	display: block;
	width: 143px;
}

.sideBoxContent ul li a:visited:hover, .sideBoxContent a:visited:hover {
	background-color: #b7d2d9; 
	text-decoration: none;
	display: block;
	width: 143px;
	padding: .1em;	
	color: #FFF;
	border-bottom: 1px solid;
	border-color: #000;
}

/* Check on visited link */
	
.sideBoxContent ul li a:visited:after, .sideBoxContent a:visited:after {
    content: "\00A0\221A";
    color: #C0BFAB;
	}

.sideBoxContent ul li a:visited:hover:after, .sideBoxContent a:visited:hover:after {
    content: "\00A0\221A";
    color: #FFF;
	}

.category-top, .category-link {
	margin-bottom: -13px;
	clear: both;
	}

Can you see where I might have gone wrong?

EDIT: A link to the site might be useful.

[kobra]

What you have posted looks to be all things that you have added...

Some of it is functional but many are not affecting the display...

I would strip it all and start with this that is present in the stylesheet. Add your border & other styling items here.

.leftBoxContainer, .rightBoxContainer {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	}

.sideBoxContent {
	background-repeat:no-repeat;
	background-position:bottom;
	padding: 0.4em;
	}

If you do not have FireFox & the web dev tools please consider getting them as they prove to be invaluable and are as close to WYSIWYG for CSS.

[sonicparke]

What you have posted looks to be all things that you have added...

Some of it is functional but many are not affecting the display...

I would strip it all and start with this that is present in the stylesheet. Add your border & other styling items here.

.leftBoxContainer, .rightBoxContainer {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	}

.sideBoxContent {
	background-repeat:no-repeat;
	background-position:bottom;
	padding: 0.4em;
	}

If you do not have FireFox & the web dev tools please consider getting them as they prove to be invaluable and are as close to WYSIWYG for CSS.

I'm not sure I understand what you mean when you say it's not affecting the display. I remove it and everything goes back to normal using the link properties. As far as I've been able to figure out I have to have everything that I added in order for it to act like I want it to.

I can start again but I'll be back to doing it like I've done it already unless someone can show me a better way.

If I don't put the padding in it all looks fine but when I try to add the padding is when it goes bad.

I am using Firefox with teh web developer tools. The problem is that this is only a problem in IE so those aren't very helpful in this situation.

[Rowan]

Is the problem to do with the category links being spread apart vertically?

If that's the problem, then it's caused by "display:block" which automatically forces inline elements (links for example) to take up the whole line. When this happens, a line break between two links will add a new gap between them.

To fix this, you need to open 'tpl_categories' in your 'templates/sideboxes' folder and delete all instances of "<br />", don't remove the surrounding ' ' apostrophes though.

[sonicparke]

Is the problem to do with the category links being spread apart vertically?

If that's the problem, then it's caused by "display:block" which automatically forces inline elements (links for example) to take up the whole line. When this happens, a line break between two links will add a new gap between them.

To fix this, you need to open 'tpl_categories' in your 'templates/sideboxes' folder and delete all instances of "<br />", don't remove the surrounding ' ' apostrophes though.

Yes! That was it! You are a beautiful person. Thank you so very much!

[Rowan]

No worries, glad I could help.