Annoying little niggles with alignment (entries and comments)

Jan 06, 2011 15:09

Hi everyone, I have three little issues with my layout that are driving me insane! They're so minute it's kinda embarrassing having to post here but I'm not that great at editing CSS.

First of all, I have a paid account and I use Mozilla Firefox.

1) My entry userpic is pushing the alignment of my entry out slightly:




Originally the entry userpic was set to 75px, and when I changed it to 100px I started having this issue. Again I'm not good with padding or margins lol so any help to put it in line will be appreciated!

2) If a comment is too long, part of the text is hidden underneath the userpic:




3) On the currents, where you have music, feeling etc, my tagging part isn't inline with the rest of the other currents, and nor does it have the tag symbol that's present in the code (http://i42.tinypic.com/258md5u.png):




Lastly, MY CSS:

/* made by eunkyung
style -- Flexible Squares s2 */

BODY{
margin-left: ;
background-color: #000000;
background-image: url("");
background-repeat:;
background-position: ;
background-attachment: ;
text-align: left;
font-size: 7pt;
color: #404040;
font-family: "verdana", sans-serif;
}

body{margin: 0; }

a, a:link, a:visited {
font-size: 7.5pt;
font-family: "verdana" Helvetica, sans-serif;
cursor: default;
color: #f0a530;
font-weight: none;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;
}

a:hover{
font-family: "verdana" Helvetica, sans-serif;
cursor: default;
color: #c5c5c5;
font-weight: none;
text-transform: none;
text-decoration: none;
}

blockquote {
margin: 5px 5px;
padding: 4px;
color: #c5c5c5;
font-size: 7pt;
border-left: #f0a530 solid 3px;
text-align: left;
}

#content {
width: 920px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background: ;
}

#maincontent {
margin: 0px 325px 0px 0px;
}

/* sidebar */

#sidebar {
width: 300px;
margin-top: 10px;
padding-top: 210px;
padding-left: 0px;
padding-right: 0px;
background-image: url("http://i919.photobucket.com/albums/ad38/sunflowers_love/stock_banner10.png");
background-repeat:no-repeat;
background-position: top;
color: #9C9C9C;
font-family: "verdana" Helvetica, sans-serif;
font-size: 7.5pt;
line-height: 12pt;
text-align: justify;
float: right;
display:;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #f0a530;
text-decoration: none;
}

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

.defaultuserpic {
text-align: center;
border-color: 10px solid #FEFEFE;
}

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

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

.sbarbody2 {
padding: 8px 0px 8px 0px;
}

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

.sbarcalendar {
padding-right: 7px; padding-left: 7px;
background: #f9f9f9;
text-align: right;
font-family: "verdana", Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
}

.sbarcalendarposts {
padding-right: 7px; padding-left: 7px;
border: 0px solid #ddd;
background: #f9f9f9;
text-align: right;
font-family: "verdana", Helvetica, sans-serif;
color: #73c8cb;
font-size: 8pt;
}

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

li.sbaritem {
font-size: 7.5pt;
margin: 2px 6px 2px 3px;
padding: 5px 5px 5px 5px;
border-bottom: 1px #363636 solid;
}

li.sbaritem:hover {
font-size: 7.5pt;
}

li.sbartitle {
width: 190px;
list-style: none;
margin-top: 0px;
margin-left: -3px;
text-align: left;
font-weight: normal;
padding: 10px 5px 10px 15px;
color: #000000;
font-family: "verdana" Helvetica, sans-serif;
font-size: 12pt;
background: #f1f1f1;
border-bottom: 1px solid #cccccc;
border-top: 0px solid #f1f1f1;
text-transform: uppercase;
letter-spacing: 0px;
display: none;
}

ul.ljtaglist li {
padding: 0px;
margin: 5px;
list-style: decimal-leading-zero;
list-style-position: outside;
background: #000000;
}

.nav a {border-bottom: 0px solid #e6dcd6; border-top: 2px solid #e2e7e1; color: #9f8449; display: block; font-family: tahoma; font-size: 8pt; text-transform: uppercase; padding: 3px; line-height: 10px; background-color: #eeeeee;}
.nav a:hover {color: #9f8449; text-decoration: none; background-color: #f5f5f5;}
.nav br {display: none;}

/* header, footer */

#header {
color: #ffffff;
margin: 0 auto 0px;
text-align: right;
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
border-bottom:0px solid #111111;
padding: 0 0 0px;
display:relative;
}

#footer {
width: auto;
margin-top: -5px;
margin-bottom: 5px;
padding: 15px 0px 15px 15px;
text-align: left;
text-transform: lowercase;
letter-spacing: 1px;
background-image: url('');
background-repeat: repeat;
border-top:0px solid #363636;
font-size: 10pt;
color: #FFFFFF;
z-index: 100;
}

div#header a, div#header a:link, div#header a:visited{
color:#ffffff;
text-transform: uppercase;
background: #f0a530;
padding: 18px;border-left: 0px solid #232323; margin:0 0 0 0px;
}

div#footer a, div#footer a:link, div#footer a:visited {
font-family: "verdana" Helvetica, sans-serif;
color: #ffffff;
font-size: 7pt;
padding: 15px 15px 15px 15px;
text-transform: uppercase;
border-left: #f0a530 solid 3px;

}

div#header a:hover {
color:#000000;
background: #d46318;
text-transform: uppercase;
}

div#footer a:hover {
font-family: "verdana" Helvetica, sans-serif;
color: #ffffff;
font-size: 7pt;
padding: 15px 15px 15px 15px;
text-transform: uppercase;
border-left: #d46318 solid 3px;
}

ul.navheader{
padding: 18px 0;
margin: 0px;
background-position:left;
}

ul.navheader li {
display: inline;
margin: px 0px 0px;
list-style-type: none;
}

div#header li.view {
padding: 18px;
border-left: 0px solid #232323;
margin:0 0px 0 0px;
background: #f0a530;
}

#footer .viewing {
display:none;
}

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

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

.clearfoot {
display: none;
clear: both;
}

/* title, substitle */

.title {
display: none;
text-align: left;
color: #FEFEFE;
font-family: "Microsoft Sans Serif", sans-serif;
font-size: 1pt;
letter-spacing: 2pt;
line-height: 0pt;
}

.subtitle {
display: none;
text-align: left;
color: #FEFEFE;
font-family: "Microsoft Sans Serif", sans-serif;
font-size: 1pt;
letter-spacing: 2pt;
}

/* tags page, tags */

.ljtaglist {
list-style-type: none;
padding: 0px;
margin: -1px 20px 0px 20px;
margin-left: 70px; width: 50%;
text-transform: uppercase;
text-align: left;
}

.ljtaglist li {
border-bottom: 1px solid #cccccc;
padding: 5px 2px 5px 20px;
color: #c5c5c5;
}

H2 {
margin: 30px 0px 10px 90px;
text-align: left;
padding: 2px 2px 2px 10px;
line-height: 12px;
font-weight: normal;
font-style: italic;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0px;
font-family: verdana;
color: #888888;
background: url('') 0px 2px no-repeat;
}

ul.ljtaglist {
color: #bbb;
font-family: "Tahoma", Helvetica, sans-serif;
font-size: 7pt;
padding: 8px 8px 8px 12px;
background: #000000;
text-align: left;
margin-right: auto;
margin-left: auto; padding: 35px;
}

.ljtags {
margin-top: 12px;
color: #c5c5c5;
font-size: 7pt;
font-weight: normal;
background: url("http://i42.tinypic.com/258md5u.png") 1px 1px no-repeat;
padding-left: 18px;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #f0a530;
font-size: 7pt;
text-transform: lowercase;
font-weight: light;
}

/* subcontent, entry */
.subcontent {
padding-left: 10px;
padding-top: 10px;
border-right: solid #242424 0px;
background: #000000;
}

.entry{
padding: 10px 20px 20px 10px;
margin: 0px 0px 0px 0px;
color: #9C9C9C;
font-family: "verdana" Helvetica, sans-serif;
font-size: 7pt;
line-height: 11pt;
text-align: justify;
background: #000000;
}

.entry ul li {
padding-left: 10px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

/* userpic, userpic friends */

.userpic {
display: ;
position: relative;
float: left;
padding: 0px;
margin-right: 10px;
margin-left: -110px;
margin-top: 10px;
z-index: 15;
background-color: transparent !important;
border: 0px solid #946063;
background-image: url('');
background-repeat: repeat;
border: 0px solid #f7f7f7;
}

.userpicfriends {
display: ;
position: relative;
float: left;
background-color: transparent !important;
padding: 0px;
margin-right: 10px;
margin-left: -110px !important;
margin-top: 10px;
z-index: 15;
border: 0px solid #946063;
text-align: right;
font-family: "verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}

.userpic img, .userpicfriends img, .defaultuserpic img{
background: #f0a530;
padding:8px; border-width: 0px;
border-color: #cc9999;
border-style: solid;
width: 100px;
height: 100px;}

.userpic font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends {font-size: 3; align: right;}

.userpicfriends a{ display: yes;}

.userpicfriends br {
display: block;
height: 0;
}

/* date, subject, comments, currents */

.date{
margin-left: 0px;
margin-top: 0px;
text-align: left;
padding-left: 10px;
color: #444343;
font-family: "verdana" Helvetica, sans-serif;
font-size: 7pt;
border-bottom: 0px solid #f7f7f7;
border-right: solid #77cfe0 0px;
text-transform: lowercase;
background-color: #000000;
display: ;
}

.subject {
padding-left: 10px;
margin-bottom:0px;
padding-top:0px;
font-weight: normal;
padding-bottom: 2px;
color: #787878;
font-family: "verdana" Helvetica, sans-serif;
font-size: 9pt;
border-right: solid #77cfe0 0px;
text-transform: uppercase;
letter-spacing: 1px;
display: ;
}

.subject a, .subject a:link, .subject a:visited {
font-family: "verdana" Helvetica, sans-serif;
color: #f0a530;
text-transform: uppercase;
}

.subject a:hover {
color: #999;
}

.datesubject {
margin-top: 10px;
padding-left: 0px;
background-color: #000000;

}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #777777;
font-size: 7pt;
text-transform: lowercase;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #777777;
font-size: 7pt;
text-transform: lowercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #f0a530;
font-size: 7pt;
text-transform: uppercase;
font-weight: light;
}

.currentlocation a:hover, .ljtags a:hover {
color: #999;
font-size: 7pt;
font-weight: light;
text-transform: lowercase;
}

.currentlocation {
height: 16px;
background: url('http://i39.tinypic.com/2qd61p3.png') 1px 1px no-repeat;
padding-left: 18px;
}

.currentmood {
height: 18px;
background: url('http://i46.tinypic.com/2hoidm8.gif') 4px 4px no-repeat;
padding-left: 18px;
}

.currentmusic {
height: 18px;
background: url('http://i44.tinypic.com/2dwhszn.png') 1px 1px no-repeat;
padding-left: 18px;
}

.currentgroups {
padding-left: 20px;
height: 18px;
background: url('http://i43.tinypic.com/x9kir.jpg') 1px 1px no-repeat;
}

.comments {
margin-top: 10px;
font-family: "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
font-weight: none;
padding: 3px;
color: #cccccc;
border-top: solid #363636 1px;
text-transform:lowercase;
letter-spacing: 0px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #666666;
text-transform: uppercase;
}

div.comments a:hover {
color: #bbbbbb;
text-transform: uppercase;
}

/* other */

.clear {
display: none;
height: 0px;
}

.skiplinks {
text-transform: lowercase;
text-align: center;
margin: 08px 0 08px 0;
padding: 12px;
color: #888888;
background: #FDFDFD;
}

/* header */

.headerimage {
position: relative;
width:px;
height: px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('');
background-repeat: no-repeat;
}

.separator {
background-color: #f1f1f1;
background-image: url('');
background-repeat: repeat-x;
height: 0px;
}

.datesubjectcomment {
background-color: #242424;
padding: 5px;
margin-top: 20px;
color: #c9c9c9;
}

.userpiccomment {
position: relative;
top: -10px;
padding: 4px;
margin: 0px 10px -20px 0px;
z-index: 15;
float: left;
height: 100px;
width: 100px;
background-color: #d46318;
}

.box {
clear: left;
color: #242424;
}

input, textarea {
background-color: #ffffff;
padding: 3px;
font-size: 10px;
font-family: "verdana", sans-serif;
color: #000000;
border: 1px solid #000000;
}

textarea.textbox {
width: 100% !important;
border: 1px solid #000000;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "verdana", sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #242424;
color: #c9c9c9;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "verdana", sans-serif;
color: #c9c9c9;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #242424;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #242424;
}

.commentinfo {
background-color: #242424;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
padding: 10px;
color: #ffffff;
background-color: #000000;
}

/*---------------------------------------
Tiny Icons
-----------------------------------------*/

.clear {
height: 0px;
}

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-color: transparent;
/* so that IE users will still see an image */
background-image:url(http://i174.photobucket.com/albums/w116/warmer_climate/alternative/mushroom.png) !important;
padding: 16px 16px 0 2px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image:url(http://i174.photobucket.com/albums/w116/warmer_climate/alternative/mushroom.png) !important;
padding: 16px 16px 0px 2px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
background-image:url(http://i174.photobucket.com/albums/w116/warmer_climate/alternative/hobbitholes_tulipsthree.gif) !important;
padding: 11px 15px 0px 2px !important;
}

Hope someone can help me out! As I said they're really small issues lol but I can't for the life of me figure it out.

Cheers,
Jess

comments, solved, misc, entries

Previous post Next post
Up