I got
this layout by
passing_girl and changed it a bit to fit my taste. I've fixed almost everything that needed to be after I made my changes to the original layout. But there's one thing I can't fix: there's a huge gap between the end of the text of the first entry and the tags/currents on every page. The tags/metadata on the first entry start where the sidebar ends. You can see it in
this pic. I zoomed it down so that the gap could fit in one screen shot. Not very good quality, but it does the job.
I've looked through my CSS code a thousand times and I can't figure it out. I've also looked at old entries in this comm but the fixes that worked for other people did not work for me.
I'm using Firefox and I have a paid account.
Original code here. /* Layout by Passing Girl @ Livejournal.com (
http://passing-girl.livejournal.com) */
/* S2 Flexible Squares - February 2008 - It'll be dark soon (v.yellow) */
body { font-size: 11px; font-family: verdana; margin: 0px 0px 50px 0px; padding: 0px; color: #BEBEBE; background: #313131; text-align: center; }
html { margin: 0px; padding: 0px; }
a, a:link, a:visited, a:active { font-weight: normal; text-decoration: none; color: #FFBE22; }
a:hover { color: #A8CA49; text-decoration: none; }
blockquote { color: #888787; margin: 5px 28px 5px 28px; padding: 12px 14px 14px 14px; border-style: solid; border-width: 0px 0px 0px 5px; border-color: #FFBE22; background: #404040 url(
http://i239.photobucket.com/albums/ff183/pg_layouts/layout03/corner_blockquote.jpg) bottom right no-repeat; }
code, kbd, pre, tt { font-family: monospace; font-size: 11px; color: #A8CA49; }
i, em { color: #FFF; }
textarea { color: #BEBEBE; border: 1px solid #404040; background: #515151; font-size: 11px; }
#content { width: 840px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px 0 20px 0; text-align: left; background: #454545 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/content.jpg) top left repeat-y; }
#header { background: #313131; margin: 0px; padding:0px; height: 60px; }
#maincontent {padding: 30px 10px 0px 220px; margin: 0px; text-align: justify; }
#sidebar { text-align: justify; font-size: 9px; font-family: verdana; background: #515151 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/corner_bottomleft.jpg) bottom left no-repeat; width: 210px; margin: 0px; padding: 132px 0px 5px 0px; float: left; clear: right; }
#footer { text-align: center; }
.title { display: none; }
.subtitle { font-family: arial, sans-serif; font-size: 32px; line-height: 20px; letter-spacing: 1px; font-style: italic; text-align: left; text-transform: uppercase; padding: 35px 0 0px 0; color: #454545; position: absolute; white-space: nowrap; margin: 0px 0px 0px 21px; }
.headerimage { margin: 0px; padding: 0px; height: 0px; }
.navheader { line-height: 21px; font-size: 9px; letter-spacing: 1px; text-transform: lowercase; border-bottom: 0px solid #494949; text-align: center; white-space: nowrap; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; width: 210px; float: left; position: relative; top: 160px; margin: -100px 0 0 0; padding: 0px; }
ul.navheader li { list-style-type: none; }
ul.navheader li a:link, ul.navheader li a:visited { text-decoration: none; padding: 0px; width: 210px; display: block; border-bottom: 1px solid #494949; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_yellow.jpg) 0% 0% no-repeat; }
ul.navheader li a:hover { color: #A8CA49; text-decoration: none; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 0% 0% no-repeat; }
li.view { padding: 0px; white-space: nowrap; color: #A8CA49; width: 210px; border-bottom: 1px solid #494949; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 0% 0% no-repeat; }
.subcontent { padding: 0px 20px 0px 20px; margin: 0px; }
.entry { background: transparent; margin: 0px; text-align: justify; } .entry ol li { list-style-type: decimal-type; } .entry ul li { list-style-type: square; }
h3 { font-family: arial; font-size: 14px; font-weight: normal; color: #AAAAAA; }
.skiplinks { text-transform: lowercase; font-size: 8px; color: #444444; margin: -3px 20px 30px 20px; padding: 2px 0px 3px 0; text-align: right; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg);}.skiplinks a, .skiplinks a:link, .skiplinks a:visited, .skiplinks a:active { color: #A8CA49; font-size: 9px; letter-spacing: 1px; background: url(http
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 100% 0% no-repeat; padding: 2px 20px 3px 6px;}
.skiplinks a:hover { border-right: 0px; padding-right: 20px; color: #FFBE22; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_yellow.jpg) 100% 0% no-repeat; }
.clear { height: 3px; } .separator{ height: 20px; margin: 0 20px 0 20px; } hr { border-width: 0px; border-bottom: #404040 solid 1px; color: #454545; }
.userpic, .userpicfriends { float: right; z-index: 15; margin: 0px 10px 10px 10px; text-align: center; padding: 5px; background-color: #404040 !important; color: #4A4A4A; font-size: 9px; width: 100px; }
.userpic a:link, .userpicfriends a:link, .userpic a:visited, .userpicfriends a:visited,
.userpic a:active, .userpicfriends a:active, .userpicfriends a font { color: #A8CA49!important; } .userpicfriends a:hover font { color: #FFBE22!important; }
.datesubject { margin: 0px; margin: 0px; } .date { padding: 0px 0px 2px 0px; font-size: 9px; color: #616161; border-top: 0px solid #BBB; font-family: verdana;}
.subject { font-family: arial; font-size: 15px; font-style: italic; padding: 4px 0 0 0; margin: 0 0 30px 30px; text-transform: uppercase; letter-spacing: 1px; text-align: left; line-height: 13px; color: #FFBE22; border-bottom: 0px solid #F1F1F1; }
.subject a, .subject a:link, .subject a:visited, .subject a:active { color: #FFBE22; } .subject a:hover { color: #A8CA49; }
.ljtags { clear: left; margin: 20px 0 0 0; padding-top: 0px; font-weight: normal; color:#616161; text-transform: lowercase; font-style: italic; }
.ljtags a, .ljtags a:link, .ljtags a:visited, .ljtags a:active {color: #A8CA49; text-transform: lowercase; font-style: normal;} .ljtags a:hover {color: #FFBE22;}
.currents strong { font-weight:normal; color: #616161; text-transform: lowercase; font-style: italic; } .currents { clear: left; }
.comments { margin: 20px 0 0 0; padding: 2px 0px 3px 0; text-align: right; font-family: verdana; text-transform: lowercase; list-style-type: none; clear: left !important; border: 0px solid #B8B7B7; color: #444444; font-size: 8px; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg); }
div.comments a, div.comments a:link, div.comments a:visited { margin: 0px; padding: 2px 20px 3px 5px; text-decoration: none; background: #696969; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 100% 0% no-repeat; font-size: 9px; letter-spacing: 1px; color: #A8CA49; }
div.comments a:hover { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_yellow.jpg) 100% 0% no-repeat; color: #FFBE22; }
.sbarbody { margin: 0 0 20px 0; padding: 0px; }.sbarheader { margin: 0px; padding: 0px; }
li.sbartitle { margin: 0px; padding: 2px 5px 3px 5px; color: #FFBE22; font-size: 9px; text-transform: lowercase; text-align: center; letter-spacing: 1px; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; }
.defaultuserpic { padding: 0px 0 20px 3px; text-align: center; }.defaultuserpic a img { background-color: #484848; padding: 5px; } .defaultuserpic a:hover img { border-color: #555555; }
.sbarbody2 { margin: -18px 0 20px 0; padding: 7px 10px 0px 10px; color: #A6A6A6; text-align: justify; }
ul.sbarlist { margin: 0px; padding: 0px; list-style: none; }
li.sbaritem { text-align: justify; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_yellow.jpg) 100% 0% no-repeat;}
li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active{ display: block; line-height: 10px; padding: 2px 10px 3px 5px; border-bottom: 1px solid #494949; text-transform: lowercase; color: #A6A6A6; }
li.sbaritem:hover {background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg); } li.sbaritem a:hover {background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 100% 0% no-repeat; } li.sbaritem a:hover {color: #A8CA49; }li.sbaritem a { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) -100px -100px no-repeat; }
#sidebar_summary li.sbaritem { color: #616161; display: block; line-height: 10px; padding: 2px 10px 3px 5px; border-bottom: 1px solid #494949; text-transform: lowercase; } #sidebar_summary li.sbaritem:hover { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg) 100% 0% no-repeat; }
#sidebar_summary li.sbaritem a { display: inline; padding: 0px; border-bottom: 0px; } #sidebar_summary li.sbaritem a:hover { background: none; }
li.tagcloud {padding: 7px 10px 0 10px;}
table.calendar { text-align: center; padding: 0px; width: 210px; padding: 7px 7px 0 7px; margin: 0px; } table.calendar td { border: 1px solid #474747; text-align: center; color: #616161; letter-spacing: -1px; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; } .sbarcalendarposts a { display: block; } .sbarcalendarposts:hover a { color: #474747; } .sbarcalendarposts:hover { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_green.jpg); }
.box { padding: 0px 20px 0px 20px; margin: 0px; color: #616161; clear: left; border-top: 0px solid #404040; text-align: left; }
.box b, .box strong {font-weight: normal;}
.commentbox { margin: 34px 0px 10px 30px; margin-left: 100px; padding: 39px 20px 30px 19px; color: #A9A8A8; background-color #404040; text-align: justify; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; }
.commentbox input { background: #515151; border: 1px solid #404040; }
.datesubjectcomment { padding: 5px; color: #616161; padding-bottom: 10px; line-height: 14px; margin-bottom: 10px; border-bottom: 1px solid #4A4A4A; }
.datesubjectcomment strong, .datesubjectcomment b {text-transform: uppercase;}
.datesubjectcomment .ljuser strong, .datesubjectcomment .ljuser b {text-transform: none;}
.userpiccomment { position: relative; padding: 5px; background: #4A4A4A; margin: -10px 14px 10px -5px; z-index: 15; float: left; }
.commentreply { position: relative; margin: 0 0 10px 0; color: #A9A8A8; }
.commentbox a, .commentbox a:link, .commentbox a:visited, .commentbox a:active { color: #A8CA49; } .commentbox a:hover { color: #FFBE22; }
.commentboxpartial { padding: 10px; margin: 10px; margin-right: 0px; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; color: #777777; }
#postform { margin: 15px 0px 10px 0px; font-size: 9px; } #qrform table { border: 0px solid #000000 !important; }
textarea.textbox { width: 100% !important; font-family: verdana; font-size: 11px; color: #BEBEBE; border: 1px solid #404040; background: #515151; margin: 1px 0px 2px 0px; }
select { font-family: verdana; font-size: 9px; height: 18px; width: 195px; color: #BEBEBE; margin-top: 4px; background: #515151; border: 1px solid #404040; }
option { font-family: verdana; font-size: 9px; color: #BEBEBE; border: 0px ; }
input { font-family: verdana; font-size: 9px; color: #BEBEBE; margin: 1px 0px 1px 0px; background: #515151; border: 1px solid #404040; }
#ljuser_row #input { background: none; } label { font-family: verdana; font-size: 9px; }
.replytoposter { color: #616161; padding: 0px 0px 1px 0px; margin: 0px 0px 10px 0px; border-top: 0px solid #EAEAEA; }
.replytosubject { font-family: arial; font-size: 15px; font-style: italic; padding: 4px 0px 0px 0px; margin-left: 30px; margin-bottom: 30px; ext-transform: uppercase; letter-spacing: 1px; text-align: left; line-height: 13px; color: #FFBE22; border-bottom: 0px solid #F1F1F1; }
ul.year { padding: 0px; margin: 10px 0px 20px 0px; text-align: center; }
ul.year li { display: inline; font-size: 15px; font-weight: normal; font-style: italic; margin: 0px; padding-right: 10px; }
ul.year li a, ul.year li a:link, ul.year li a:visited, ul.year li a:active { color: #A8CA49; } ul.year li a:hover { color: #FFBE22; }
table.yeartable { margin-left: auto; margin-right: auto; width: 80%; }table.yeartable td.yeardate { padding: 3px 5px 5px 0; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; }
table.yeartable td.yearday { text-transform: uppercase; text-align: center; color: #383838; background: #FFBE22 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/bg_yellow.jpg) left top repeat-x; }
td.yearmonth { border-style: none; }
.ljtaglist { list-style-type:none; padding: 0px 0 0 30px; margin: -1px 0px 0px 3px; }
H2 { font-family: sans-serif, arial; font-size: 15px; font-style: italic; padding: 4px 0px 0px 2px; margin-left: 30px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: left; line-height: 13px; color: #A8CA49; }
ul.navfooter { padding: 7px 0px 7px 0px; margin: 20px 210px 0px 0px; text-align: center; list-style-type: none; text-transform: lowercase; font-weight: normal; font-size: 9px; letter-spacing: 1px; font-family: verdana; background: #404040 url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/gradient_dark.jpg) left top repeat-x; position: relative; top: 20px; left: 210px; }
.navfooter li { display: inline; margin: 0px; padding: 0px 0px 0px 0px; }.navfooter a:link, .navfooter a:visited, .navfooter a:active { margin: 0px; padding: 0px 10px 0px 10px; }
.clearfoot { margin: 0px; padding: 0px; clear: both; height: 0px; }
/*CONTEXTUAL POPUP Thanks to: cartonage @ livejournal*/
div.ContextualPopup div.Inner { background-color: #454545 !important; border: 1px solid #3C3C3C; padding: 5px; color: #7E7D7D !important; font-size: 11px; font-family: verdana; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #A8CA49 !important; } div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus { font-weight: bold !important; color: #FFBE22; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/butterfly_yellow.png); padding: 16px 16px 0px 2px !important; }
.ljuser a b { font-weight: normal; }.ljuser a, .ljuser a:link, .ljuser a:visited, .ljuser a:active { color: #FFBE22; }
.ljuser b, .ljuser b:link, .ljuser b:visited, .ljuser b:active { color: #FFBE22; }.ljuser:hover a, .ljuser:hover b { color: #A8CA49; }
.ljuser a { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/flower_lightgreen.png) -100px -100px no-repeat; }
.ljuser { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/butterfly_lightgreen.png) -100px -100px no-repeat; }
.ljuser img[src="
http://l-stat.livejournal.com/img/userinfo.gif"] { background-color: transparent; background-image: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/butterfly_yellow.png); }
.ljuser:hover img[src="
http://l-stat.livejournal.com/img/userinfo.gif"] { background-image: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/butterfly_lightgreen.png); }
.ljuser img[src="
http://l-stat.livejournal.com/img/community.gif"] { background-color: transparent; background-image: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/flower_lightgreen.png); padding: 16px 16px 0px 2px !important; }
.ljuser:hover img[src="
http://l-stat.livejournal.com/img/community.gif"] { background-image: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/flower_yellow.png); }
#ljuser_row img { display: none; } #ljuser_row { background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/flower_lightgreen.png) no-repeat 6px 5px; } #ljuser_row label { background: #454545; padding-top: 2px; }
#content img[src="
http://l-stat.livejournal.com/img/icon_protected.gif"]{ display:inline; width: 0; height: 0; padding: 14px 12px 0px 0px !important; float:center; background: url(
http://i629.photobucket.com/albums/uu19/betgirl/layouts/lock.gif); background-repeat: no-repeat; margin: -1px 0px 0px 0px; }
/*Header picture*/
.subtitle { display: none }
#header { padding-top: 340px; background: #313131 url(
http://i91.photobucket.com/albums/k318/bcharvet/Chuck/headers/betgirl_ohfrecklecoffeeforcloser.png) center top no-repeat; }
Thanks!
SOLVED! I've finally figured it out. I changed clear: left to clear: none in comments, ljtags and currents.