CSS/HTML problem

I have this page:
http://tinyurl.com/y9ptp2f

I cannot figure out where the border is coming from on the sidebar. I want borders on the right but cannot figure out how to do it. I do not know where the border on the left is coming from.

any help?
body {
	margin: 0px;
	padding: 0px;
	background: url(images/gradient.jpg) ;
	background-repeat: repeat-x; 

	text-align: justify;
	font: 13px Arial, Helvetica, sans-serif;
	color: #444444;
}
 .align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }

h1, h2, h3 {
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
}

h1 {
	font-size: 2.4em;
	padding-bottom:20px;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

p, ol, ul {
	margin-bottom: 1.8em;
	line-height: 120%;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a img {
	border: none;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	border: 10px solid #ffffff;
}

/* Header */

#header {
	width: 900px;
	height: 140px;
	margin: 0px auto;
}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Logo */

#logo {
	float: left;
	padding-left: 20px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h1 {
	padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
	float: right;
	width:650px;
}

#menu ul {
	margin: 0px;
	padding: 49px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	margin: 0px;
}

#menu a {
	display: block;
	width: auto;
	padding: 6px 20px;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active {
	background: #404040;
}

#menu .active a {
	background: url(images/img02.gif) no-repeat 100% -40px;
}

/* Page */

#page {
	width: 900px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
}

#header-pic {
	background: url(images/img05.jpg) no-repeat left top;
	width: 900px;
	height: 210px;
}

/* Content */

#content {
	float: right;
	width: 670px;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
}

.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 200px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
	background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
	background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
	padding: 0px 0 5px 0;
	margin: 0px;
	list-style: none;
}

#sidebar li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 30px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
	margin-bottom: 1.8em;
	list-style: none;
}

#sidebar h2 {
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search form {
	margin-bottom: 1.8em;
	padding: 0px;
}

#search fieldset {
	margin-left: 20px;
	padding: 0px;
	border: none;
}

#search #s {
	width: 160px;
}

/* Footer */

#footer {
	color: #FFFFFF;
	clear: both;
	width: 900px;
	height: 50px;
	margin: 0px auto 30px auto;
	background-color: #404040;
}

#footer p {
	margin: 0px;
	padding: 19px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

Open in new window

lvollmerAsked:
Who is Participating?
 
RobinConnect With a Mentor Software EngineerCommented:
Try changing the #sidebar-content in your css file to the following for a black border, and adjust
the #sidebar-bgbtm style to remove the image border at the bottom of the sidebar:
#sidebar-content {
   border:1px solid #000;
}

#sidebar-bgbtm {
}

Open in new window

0
 
RobinSoftware EngineerCommented:
The left border is coming from the background image (images/img01.jpg), which is on
the div with id 'sidebar-content'.
0
 
enriquecadalsoCommented:
Hello. You have the content div aligned to float right with a 670px width. So it extends from the right until it reaches the 670 px. In the image I changed it to 695 and the gap between the side bar and the content is now smaller.
border.JPG
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
lvollmerAuthor Commented:
robin - how can I apply that to the right side also?
0
 
RobinSoftware EngineerCommented:
Couldn't you lose the image, and just add border to the appropriate div (#sidebar-content) ?
0
 
enriquecadalsoCommented:
Sorry, I did not understand your question the first time. The border is not shown in the sidebar because the background image is 300px width and the sidebar is 200px. Modify the image to have 200px width and you will have the border on the right side of the sidebar.

In the image I changed the width of the sidebar to 300px and the border shows. Change the background to be 200px width and it will show in the 200px width sidebar.
bg.JPG
0
 
amar31282Commented:
replace the following css ids in style.css

#sidebar-content {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:transparent url(images/img01.jpg) repeat-y scroll right bottom;}

#sidebar-bgbtm {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:transparent url(images/img03.jpg) no-repeat scroll right bottom;}

Open in new window

0
 
lvollmerAuthor Commented:
amar - that only added  border to the right side, not the left
0
 
lvollmerAuthor Commented:
robin - I could do that, but am having no luck doing it
0
 
enriquecadalsoCommented:
lvollmer, the image I am refering to is the image img03.jpg in the "images" folder. It have 300x15px, a white rectangle with the borders in the left, right and bottom sides. Look for it and using a picture editing software reduce the width to 200px (maybe 199px). Well, I put it here for you to see it better.

img03.jpg
0
 
lvollmerAuthor Commented:
ok, let me try this.
0
 
lvollmerAuthor Commented:
i don't think that made a  difference. check out the link and let me know if you see otherwise
0
 
RobinSoftware EngineerCommented:
Seeing no changes in the css, so you are probably not trying my solution?
0
 
lvollmerAuthor Commented:
robin, I did not see your solution, let me try that.
0
 
amar31282Commented:
why don't you just drop the repeater images and use this
#sidebar-content {
   border-bottom:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;

}


as suggested robinu


0
 
enriquecadalsoCommented:
Set the image03.jpg to be exactly 200px width.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.