Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 162
  • Last Modified:

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

0
lvollmer
Asked:
lvollmer
  • 6
  • 4
  • 4
  • +1
1 Solution
 
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
 
lvollmerAuthor Commented:
robin - how can I apply that to the right side also?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
RobinSoftware 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
 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now