Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

livejournal userpic placement & css

Posted on 2009-05-10
2
883 Views
Last Modified: 2012-05-06
I've done this layout http://community.livejournal.com/th_apex/ and if you look at the entry by cruxette on 5/10 you can see my issue. the stars are going behind the userpic and the comment links are going to the left of it because the entry is so short. what i want to do is have the line of stars ALWAYS under the userpic so this isn't an issue. I simply don't know the CSS coding for this problem, and have looked extensively. if this option doesn't exist, is there a way i can fix it with padding or margins?

thanks for any help.
body	{background-color: #b6bac2;
	font-family: lucida sans unicode, sans-serif;
	font-size: 8pt;
	color: #ffffff;
	text-align: center;
	margin: 10px}
 
background-color: #b6bac2;
	font-family: lucida sans unicode, sans-serif;
	font-size: 8pt;
	color: #ffffff;
	text-align: center;
	margin-bottom: 0px;}
 
.clearfoot {clear: both; height: 0;}
.title, .subtitle, .clear, #sidebar_calendar, #sidebar_summary {display: none;}
 
p,
td,
blockquote {font-size: 8pt;
	color: #999999;
	line-height: 1;}
 
	
a,
a:link,
a:visited {color: #878e9c;
	text-decoration: none;
	font-weight: bold;
	font-family: trebuchet ms, verdana, sans-serif;
        text-transform: uppercase}
	
a:hover {color: #878e9c;
	background-color: #eeeeee}
		
code,
kbd,
pre,
tt	{font-family: monospace;}
 
 
/*main table and page*/
 
#content {width: 670px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	text-align: justify;
	border-color: #cccccc;
	border-style: solid;
        border-width: 0px}
 
#maincontent {margin: 0px;
	font-family: lucida sans unicode, sans-serif;
	font-size: 8pt;
	color: #5F5A59;
	border-width: 0px;
	text-align: justify;
	padding: 0px}
 
 
 
 
 
 
/* sidebar i.e. the bar with calendar etc.*/
 
#sidebar {visibility: hidden} 
 
#header 
 
{width: 100%;
	padding: 0px;
	margin: -10px 0px 25px 0px;
	text-align: center;
	font-family: trebuchet ms, verdana, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	text-transform: uppercase;
	color: #999999;
        background-color: #ffffff;
	border: 0px} 
 
/*title and subtitle of your journal in the header - currently 
 
invisible*/
 
.title	{visibility: hidden; font-size: 1px}
	
.subtitle {visibility: hidden; font-size: 1px}
 
 
 
 
/*the bottom of the page with links to entries*/
 
#footer	{width: 100%;
	padding: 0px 0px 0px 0px;
	margin: -30px 0px 0px 0px;
	text-align: right;
	font-family: trebuchet ms, verdana, sans-serif;
	font-size: 8pt;
        font-weight: bold;
        text-transform: uppercase;
	background-color: #ffffff;
	color: #878e9c;	
	z-index: 100;
	clear: both}
 
 
 
 
/*more footer and header*/	
	
div#header a,
div#header a:link,
div#header a:visited,
div#footer a,
div#footer a:link,
div#footer a:visited {color: #878e9c;
         font-weight: bold}
	
div#header a:hover,
div#footer a:hover {color: #ffffff}	
	
ul.navheader {padding: 0px;	
	margin: 0px}
 
ul.navheader li {display: inline;			
	padding: 0 3px 0 3px}
 
 
 
 
 
/*entry layout*/	
	
.subcontent {background-color: ffffff}
		
.entry	
        {margin: 0px;
	padding: 10px 10px 0px 10px;
	background-color: #ffffff;
	font-size: 8pt;
	color: #5F5A59;
	line-height: 1.3;
	text-align: justify;
        border-width: 0;
	bottom-border: 5px}
		
.entry ul li {padding-left: 5px;
	margin-left: 15px; padding-bottom: 10px}
		
.entry ol li {padding-left: 5px;
	margin-left: 15px; padding bottom: 10px}
 
.userpic {display: none}
		
.userpicfriends {position: relative;
	float: right;
	background-color: #ffffff;
	padding: 5px;
	margin: 10px;
	z-index: 15;
	border-width: 1px;
	border-color: #eeeeee;
	border-style: sdotted;
	font-family: franklin gothic medium, verdana, arial, helvetica, 
 
sans-serif;
	font-size: 8pt;
	font-weight: bold;
        text-align: center;
        color: #878e9c;
	z-index: 15}
 
.altuserpic {position: relative;
	float: right;
	text-align: center;
	background-color: #ffffff;
	padding: 5px;
	margin: 10px;
	z-index: 15;
	border-width: 1px;
	border-color: #eeeeee;
	border-style: dotted}
		
.date	{font-family: trebuchet ms, verdana, sans-serif;
	font-size: 8pt;
        font-weight: bold;
	color: #878e9c; 
	text-transform: uppercase;
	background-color: #e7e7e7;
	text-align: left;
	padding: 2px;
	border-width: 0px}
	
.subject {font-family: trebuchet ms, verdana, sans-serif;
	font-size: 8pt;
        font-weight: bold;
	color: #808080; 
	text-transform: uppercase;
	background-color: #ffffff;
	text-align: left;
	padding: 2px;
	border-width: 0px}
		
.subject a,
.subject a:link,
.subject a:visited {color: #8dbcb1}
	
.subject a:hover {color: #ffffff}
 
.datesubject {background-color: #ffffff;
	padding: 5px}
 
.ljtags {display: block; font-family: lucida sans unicode, sans-serif;
	font-size: 8pt; 
	padding: 5px 0px 0px 0px;
	text-align: left; padding-top: 30px; padding-bottom: 5px}
 
.ljtags a:link,
.ljtags a:visited {color: #8dbcb1}
 
		
.currents,
.currentmood,
.currentmusic
        {font-family: franklin gothic medium, verdana, arial, 
 
helvetica, sans-serif;
        margin: 10px;
	font-size: 8pt;
        color: #5F5A59;
	text-transform: lowercase;
	line-height: 0.8}
 
.comments {font-family: trebuchet ms, verdana, sans-serif;
	font-size: 8pt;
        font-weight: bold;
	text-align: right;
        background-color: #ffffff;
        background-image: url('http://www.explorenorcal.com/images/tiny-star-grey.gif');
        background-position: top left;
        background-repeat: repeat-x;
	padding: 15px 0px 0px 0px;
        margin: 5px; 
        border-width: 5px;
	position: relative;
        border-bottom: 5px;
        padding-bottom: 10px;}
		
div.comments a,
div.comments a:link,
div.comments a:visited {color: #878e9c;
        font-size: 9pt}
	
div.comments a:hover {color: #878e9c;
	text-decoration: none}
 
 
 
	
/*content on entries and comments*/	
	
.datesubjectcomment {background-color: #ffffff;
	padding: 5px;
	margin-top: 20px}	
		
.userpiccomment {position: right;
	border-width: 1px;
	border-style: dotted;
	border-color: #eeeeee;
	background-color: #ffffff;
	top: -30px;
	left: 0px;
	padding: 2px;
	margin: 0px 10px -20px 10px;
	z-index: 15;
	float: right}
		
.box	{border-color: #ffffff;
	padding: 20px}
 
input,
textarea {background-color: #ffffff;
	color: #999999;
        font-family: lucida sans unicode, sans-serif;
        font-size: 8pt;
        border-width: 5px;
        border-color: #666666}
		
textarea.textbox  {width: 100% !important}
	
.reply	{position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: lucida sans unicode, sans-serif;
	font-size: 8pt;
	line-height: 125%;
	background-color: #ffffff;
	color: #5F5A59;
	line-height: 1}
		
.replytosubject {font-weight: bold;}
			
.commentreply {position: relative;
	margin: 10px;
	font-size: 8pt;
	font-family: lucida sans unicode, sans-serif;
	color: #5F5A59;
	line-height: 1}
		
.commentbox {border-color: #eeeeee; 
	border-width: 1px; 
	border-style: solid; 
	padding: 10px; 
	margin: 10px; 
	background-color: #ffffff}
		
.datesubjectcomment a:link,
.datesubjectcomment a:visited {color: #878e9c}
		
.datesubjectcomment a:hover {color: #ffffff}
	
.commentboxpartial {border-color: #eeeeee; 
	border-width: 5px; 
	border-style: solid; 
	padding: 5px; 
	margin: 5px; 
	background-color: #ffffff}
 
.commentinfo {background-color: #ffffff; 
	margin-top: 5px; 
	width: 100%}
/*----------------------------------------------------------------------------------------------
	TAGS PAGE
-----------------------------------------------------------------------------------------------*/
ul.ljtaglist {background: #ffffff; border: 10px solid #F5F5F5; margin: 0; padding: 5px 5px 5px 25px;}
h2 {background: #999999; border: 10px solid #F1F1F1; color: #C2BAB6; font-family: arial; font-size: 8pt; letter-spacing: 1px; text-transform: uppercase; padding: 5px; font-weight: normal; margin-bottom: 20px; display: none;}
			
		
/*calendar pages*/
		
ul.year	{text-align: center; 
	padding-bottom: 40px}
 
{font-size: 8pt. color: #543837}
	
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;
        background-color:#ffffff}
	
table.yeartable td.yearday {background-color: #ffffff;
	text-align: center}
	
td.yearmonth {border-style: none}
	
ul.navfooter {padding: 0px	
	margin: 0px}
	
ul.navfooter li {display: inline;	
	margin: 0 5px 0 5px}
 
.clearfoot {clear: both}
		
.clear {height: 15px}
		
.skiplinks {text-align: center}
 
.separator {height: 15px}
 
.headerimage {position: top; background: url(http://i42.tinypic.com/2u6epmp.jpg); width: 670px; height: 387px; align: center; background-repeat: no-repeat;margin-left: auto;margin-right: auto;margin-bottom: 0px; top:0; left:0;}

Open in new window

0
Comment
Question by:yougetajob
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 250 total points
ID: 24350626
You could add a new rule to give ".entry_text" a min-height.
.entry_text {
  min-height: 80px;
}

Open in new window

0
 

Author Closing Comment

by:yougetajob
ID: 31580005
simple and it worked
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question