[SOLVED] Usericons not displaying properly on friends page

Sep 17, 2011 20:08

Username of Journal: soultied
Account Level: Paid
Problem You Are Experiencing: I recently coded myself a new layout and have it the way I want. There's just one problem left. Whenever I view my friends page, the usericon of the very first entry displays down at the bottom. EXAMPLE IMAGE It does that on every first entry no matter what page I'm viewing.

Here's the CSS:
/* --------------- BODY --------------- */

body {
background-color: #E3E0DC;
text-align: center;
color: #999999;
font-family: "Lucida Grande", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

#content {
width: 800px;
margin: 0 auto 0 auto;
background-color: transparent;
padding: 0;
}

#maincontent {
margin: 10px 170px 0 0;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
}

#sidebar {
padding: 20px 0 10px 0;
margin: 0;
background-color: transparent;
background-image: url(http://i52.tinypic.com/11wgg3b.jpg);
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #FFFFFF;
width: 160px;
float: right;
text-align: justify;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

.lj_embedcontent {
max-width: 100% !important;
}

blockquote {
padding: 10px;
margin-bottom: -5px;
background-color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 11px;
color: #666666;
line-height: 1.5em;
border-right: 20px solid #72784C;
-webkit-border-radius: 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0;
}

code, kbd, pre, tt {
font-family: monospace;
}

a, a:link, a:visited, a:active {
color: #FF6666;
text-decoration: none;
}

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

/* --------------- HEADER & FOOTER --------------- */

#header {
padding: 0;
margin: 10px 0 0 0;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: 2px;
background-color: transparent;
color: #FFFFFF;
display: none;
}

#footer {
width: 800px;
text-align: center;
font-family: "Baskerville", sans-serif;
font-size: 14pt;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent;
color: transparent;
z-index: 100;
clear: both;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #b4563a;
}

div#header a:hover {
color: #7aa1f8;
text-decoration: none;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
color: #000000;
text-decoration: none;
}

div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}

ul.navheader {
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 10px;
margin: 5px;
background-color: #FFFFFF;
-webkit-border-radius: 8px;
}

ul.navfooter {
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/* --------------- TITLE & SUBTITLE --------------- */

.title, .subtitle {
display: none;
}

/* --------------- SIDEBAR --------------- */

.box-vertical2 {
margin: 10px 0 0;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #5674b9;
}

div#sidebar a:hover {
color: #7aa1f8;
text-decoration: none;
}

.defaultuserpic {
text-align: center;
margin-bottom: 20px;
}

.defaultuserpic img {
opacity: 0.8;
}

.defaultuserpic:hover {
opacity: 1.0;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
margin: 0 10px 0 10px;
padding: 10px 15px 10px 15px;
background-image: url(http://i55.tinypic.com/2pyneyt.jpg);
color: #333333;
display: none;
}

#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #999999 solid;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem {
text-align: right;
padding: 2px 5px 2px 0;
margin: 0 5px 0 5px;
list-style: none;
background-image: url(http://i55.tinypic.com/2pyneyt.jpg);
}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
color: #FF6666 !important;
text-transform: uppercase;
font-family: Verdana, sans-serif;
font-size: 12px;
}

li.sbaritem a:hover {
color: #FFFFFF !important;
font-style: italic;
}

li.sbartitle, .tagcloud, table.calendar {
display: none;
}

/* --------------- ENTRIES --------------- */

.subcontent {
margin: 0;
background-color: transparent;
background-image: url(http://i52.tinypic.com/11wgg3b.jpg);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

.entry {
min-height: 135px;
margin: -10px 0 0 150px;
padding: 10px;
background-color: transparent;
background-image: url(http://i55.tinypic.com/2pyneyt.jpg);
background-repeat: repeat;
-webkit-border-radius: 0 8px 8px 0;
}

.entry_text {
text-align: justify;
font-family: Lucida Grande, sans-serif;
font-size: 9pt;
color: #333333;
}

.entry img {
max-width: 450px;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.userpic {
position: relative;
float: left;
padding: 0;
margin: 20px 0 0 25px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
background-color: transparent !important;
opacity: 0.8;
}

.userpic:hover {
opacity: 1.0;
}

.userpicfriends {
position: relative;
float: left;
padding: 0;
margin: 20px 0 0 25px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
z-index: 15;
background-color: transparent !important;
opacity: 0.8;
clear: both;
}

.userpicfriends:hover {
opacity: 1.0;
}

.userpicfriends a font {
color: #FFFFFF;
}

.date {
text-align: right;
margin: -18px 0 0 0;
padding: 0 0 0 0;
color: #FFFFFF;
font-family: "Arial", sans-serif;
font-size: 11px;
font-variant: small-caps;
}

.subject {
text-align: left;
margin: -14px 0 0 0;
font-weight: bold;
color: #72784C;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #72784C;
text-decoration: none;
}

.subject a:hover {
color: #66CCFF;
}

.datesubject {
background-color: transparent;
padding: 5px;
margin: 0 0 0 150px;
}

.currents {
font-family: "Lucida Grande", sans-serif;
font-size: 11px;
text-align: left;
margin: 20px 0 15px 0;
}

.comments {
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: right;
background-color: transparent;
padding: 0;
position: relative;
float: right;
width: 100%;
color: transparent;
margin: -15px 0 0 0;
font-weight: bold;
}

.comments img {
vertical-align: bottom;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #72784C;
margin: 0 3px 0 3px;
}

div.comments a:hover {
color: #66CCFF;
text-decoration: none;
}

/* --------------- ARCHIVES PAGE --------------- */

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/* --------------- TINY ICONS ---------------*/

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="btn_spam.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0}

.subject img {
vertical-align: bottom !important;
}

img[src*="icon_protected.gif"]{background-image: url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/181.png)}

img[src*="icon_groups.gif"]{background-image: url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/181.png)}

img[src*="icon_private.gif"]{background-image: url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/181.png)}

.ljuser img {width: 0; height: 0; background: transparent url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/crown.png) no-repeat 0 0; padding: 16px 16px 0 0px !important; vertical-align: bottom !important}

.ljuser img[src*="userinfo.gif"] {background: transparent url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/crown.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 0px !important}

.ljuser img[src*="community.gif"] { background: transparent url(http://img.photobucket.com/albums/qq286/heartedge/lj%20stuff/cake.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 0px !important}

.ljuser img { vertical-align: bottom !important; }

/* --------------- MISCELLANEOUS --------------- */

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.headerimage { }

.separator{
height: 35px;
}

Thank you very much!

EDIT; SOLVED! I went back over the CSS and was able to figure things out.

#maincontent {
margin: 10px 170px 0 0;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
}

Changed to:

#maincontent {
float: left;
margin: 10px 0 0 0;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
}

added width: 620px; to .subcontent

removed clear: both; from .userpicfriends

entry usericon and username, solved

Previous post Next post
Up