I'm trying to create a layout but have a problem with the sidebar that I can't seem to be able to solve.
The titles as well as the content of sbarbody have an un-wanted padding at the left side and I have no idea why. sbarbody2 has the exact same values for padding and margin but (as you can see at the screenshot) the Blurb looks just fine.
I've been trying to solve this for several hours now, I checked the CSS over and over and over but I just don't see where the problem is. I even copied a portion of a working layout code into my CSS, but it had the exact same problems.
Can anyone help me?
My CSS code:
/* MY CSS: */
body{
text-align: center;
font-family: Calibri;
color: #113039;
font-size: 14px;
background-image: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/COLOURloverscom-Stripes.png); background-attachment: fixed;
background-position: center;
background-repeat: repeat;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
a, a:link{
color: #565656;
text-decoration: none;
}
a:hover{
color: #565656;
text-decoration: underline;
}
a:visited{
color: #101047;
text-decoration: none;
}
blockquote{
font-style: oblique;
padding: 0px 5px 0px 10px;
border-left: 2px dashed;
border-left-color: #f2777d;
}
p, code, kbd, pre, tt, td{
}
#content {
background-color: transparent;
background-position: center;
width: 75%;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
#maincontent{
margin-top: 15px;
font: Cambria;
font-size: 14px;
text-align: left;
margin-right: 220px;
}
#sidebar{
padding-top: 15px;
margin-top: 15px;
background-color: #cfd3f8;
border-width: 0.5px;
border-color: #afb6c3;
border-style: solid;
font-size: 13px;
font-family: Cambria;
color: #711717;
width: 200px;
float: right;
text-align: left;
}
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px 0px 0px 0px;
font-family: Cambria;
font-size: 16px;
font-weight: normal;
background-position: center;
color: #777777;
background-color: white;
}
.headerimage {
border: 5px solid #fff;
width: 800px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
height: 391px;
background-image: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/Banner_02800x391.jpg); background-repeat: no-repeat;
background-position: top center;
}
#footer{
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
font-size: 16px;
font-weight: normal;
background-position: center;
color: #777777;
background-color: white;
clear: both;
z-index: 100;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{
text-decoration: underline;
text-transform: capitalize;
color: black;
font-size: 16px;
}
div#header a:hover, div#footer a:hover{
color: #a00e2b;
background-color: white;
}
ul.navheader{
padding: 0px;
margin: 0px;
}
ul.navheader li{
display: inline;
padding: 0px 3px 0px 3px;
}
li.view, li.viewing{
text-decoration: none;
text-transform: capitalize;
color: #ef4c6d;
font-weight: bold;
font-size: 16px;
}
.title, .subtitle{
display: none;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #2d2d39;
}
div#sidebar a:hover {
color: #5f5f78;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
margin: 5px 5px 5px 5px;
background-color: #ecedf0;
}
.sbarbody2 {
background-color: white;
padding: 0px 5px 0px 5px;
margin: 5px 5px 5px 5px;
color: black;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
ul.sbarlist {
list-style: circle;
}
li.sbaritem {
list-style: none;
}
li.sbartitle {
text-align: center;
list-style: none;
background-color: #afb6c3;
font-weight: bold;
color: #3b414d;
margin: 10px 0px 10px 0px;
}
/* maincontent */
.entry {
margin: 0px 0px 0px 0px;
padding: 10px;
background-color: #d4dce8;
color: #000000;
font: Cambria;
font-size: 12px;
text-align: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
.entry_text {
background-color: white;
padding: 10px 10px 10px 15px;
font: Cambria;
font-size: 14px;
}
.entry ul li{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li{
padding-left: 5px;
margin-left: 10px;
}
.userpic {
position: relative;
float: left;
margin: 10px 10px 10px -120px;
padding: 5px;
z-index: 15;
border: 1px dotted #f2777d;
background-color: white !important;
text-align: center;
}
.userpic img {
background-color: white !important;
}
.userpicfriends {
position: relative;
float: left;
margin: 10px 10px 10px -120px;
padding: 5px;
z-index: 15;
border: 1px dotted #f2777d;
background-color: white !important;
text-align: center;
}
.userpicfriends img {
background-color: white !important;
}
.userpicfriends a font{
color: black;
}
.datesubject {
color: #2d2d2d;
background: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/datesubject.png) no-repeat left center;
margin-bottom: 10px;
padding: 5px 5px 5px 5px;
}
.date{
line-height: 200%;
top: 5px;
font-size: 14px;
text-align: right;
}
.subject {
font-size: 18px;
font-weight: bold;
text-align: left;
padding-left: 50px;
}
.currents {
background-color: transparent;
font-size: 12px;
padding: 0px 0px 0px 10px;
}
.currentlocation {
background: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/rainbow.png) no-repeat left center;
text-align: left;
padding: 0px 16px 2px 20px;
}
.currentmood {
background: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/rain-icon.png) no-repeat left center;
text-align: left;
padding: 0px 16px 2px 20px;
}
.currentmusic {
background: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/Square-Double-Rainbow-icon.png) no-repeat left center;
text-align: left;
padding: 0px 16px 2px 20px;
}
.comments {
background: url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/commenting.png) no-repeat right center;
font-size: 13px;
text-align: right;
padding: 0px 20px 2px 22px;
top: 15px;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment{
background-color: #fffacd;
}
.userpiccomment{
position: relative;
border-width: 5px 5px 5px 5px;
border-color: #ffe4e1;
background-color: #fff2f0;
top: -30px;
left: 0px;
padding: 5px 5px 5px 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 5px 5px 5px 5px;
border-style: dashed;
border-color: #ffe4e1;
}
.box{
clear:left;
}
input, textarea{
background-color: #f4f4f4;
color: #172744;
border: 1px solid #919bad;
padding: 3px;
}
textarea.textbox{
width: 100% !important;
}
.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background-color: #d5f0e1;
color: #000000;
}
.replytosubject{
font-weight: bold;
}
.commentreply{
position: relative;
margin: 10px 10px 10px 10px;
color: #000000;
}
.commentbox{
background-color: #fffbfb;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
border-width: 1px;
border-style: solid;
border: 1px solid #ffb7b7;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited{
color: #ff6262;
}
.datesubjectcomment a:hover{
text-decoration: underline;
}
.commentboxpartial{
background-color: #ffcdc8;
border-color: #ffe4e1;
border-style: double;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
.commentinfo{
background-color: #fafad2;
margin-top: 10px;
width: 100%;
}
/*maincontent -- year/archive pages */
ul.year{
text-align: center;
padding-bottom: 40px;
}
ul.year li{
display: inline;
font-size: larger;
color: #7b1e31;
}
table.yeartable{
margin-left: auto;
margin-right: auto;
background-color: #f1c7e4;
border: 1px solid #7b1e5f;
}
table.yeartable td.yeardate{
border: 1px solid white;
color: #df8093;
}
table.yeartable td.yeardate a{
color: #6a1a2a;
font-weight: bold;
}
table.yeartable td.yearday{
border: 1px solid #2d2d39;
color: #2d3339;
}
td.yearmonth{
border: none;
background-color: #c1314e;
color: white;
}
/* footer */
ul.navfooter{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
ul.navfooter li{
display: inline;
margin: 0px 5px 0px 5px;
}
.clearfoot{
clear: both;
}
/* misc */
.clear{
height: 15px;
}
.separator{
height: 35px;
}
/* Tiny Icons */
/* Generated by Malionette's Tiny Icon Generator
http://malionette.net/generator/tinylite.html */
span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/Actions-format-stroke-color-icon.png) no-repeat !important; padding: 16px 0 0 16px !important; }
span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/color-swatch-2-icon.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/065.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/1.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(
http://i1229.photobucket.com/albums/ee464/clementine-chan/Layout/_Rainbow/lock-unlock-icon.png) no-repeat !important; padding: 16px 0 0 16px !important; }
Edit: My problem could be solved thanks to
london_fan!
I needed to specify the left padding to 0px and it worked :) Thanks again~