Custom Comment Page & Userpic in IE
Journal Preview: candimods
Style Name: Flexible Squares
Account Type: Plus
Problem/Question:
Problem 1: Custom Comment Page
I'm using this layout by cielo_gris (which is for Basic Accounts only), so it doesn't have a custom comment page. But I really would like to have that, so I tried to make it on my own.
So, here's the problem: No matter what I change, nothing shows up on the comment page.
I actually have no clue about coding but so far I was always successful with tweaking layouts, but now I really have no idea what could be wrong or missing. I hope this is okay here. I'd be thankful for any help.
Problem 2: Userpics in IE.
In Firefox the layout works just fine, but in IE the userpics are choped off.
Thanks in advance!
/* Cleaned CSS: */
/* SUENOS AZULES
layout by cielo_gris */
/* ---------- MAIN ---------- */
body { background: url('http://i208.photobucket.com/albums/bb25/sarith_x/Header/candiiconheader4.png') bottom right no-repeat #f8f8f8; background-attachment: fixed;
color: #a4a4a4;
; text-align: justify; color: #898989; font: 9px arial, corbel, Georgia; font-weight:bold; margin: 75px 0 75px 0; text-transform: lowercase; line-height:11px!important;}
img, .img {max-width:230px; max-height:230px;}
::-moz-selection { background: #F8F8F8; color: #98B7EA; }
a, a:link, a:visited { color: #f8f8f8; text-decoration: none; font-weight: bold; }
a:hover { color: #8a9290; text-decoration: none; font-weight: bold; }
.subject a, .subject a:link, .subject a:visited, .subject a:hover { font-family: georgia; font-size:13px; color:#eeefef; letter-spacing:-1px; border:0px; text-transform:uppercase; }
.subject {background-color:#98B7EA; padding: 10px 50px 11px 20px; margin-right:90px; -moz-border-radius: 3.0%; }
#content { width: 780px; margin: auto; background: transparent; min-height:170px!important; }
#maincontent { margin: 0 120px 0 0; width: auto; padding: 100; background: transparent; }
/* ---------- ENTRIES ---------- */
.subcontent {margin: 0 50px 50px 50px; padding: 0px; background: #B2CCED; -moz-border-radius: 3.0%; }
.entry { line-height:10px!important; text-align: justify; background-color:#98B7EA; padding: 30px 50px 0 20px; margin-right:90px; -moz-border-radius: 3.0%; margin-top:-10px; }
.entry a:hover{border-bottom:2px solid #f8f8f8;}
hr { color: transparent; height: 1px; border-style : none; }
/* ---------- HEADER&FOOTER---------- */
#footer { clear: both; width: auto; padding: 20px; text-align: left; text-transform: lowercase; letter-spacing: 1px; z-index: 100; background:transparent; margin: 0px 0px 0px 30px; }
div#footer a, div#footer a:link, div#footer a:visited { color: #98B7EA; padding: 10px 0 10px 10px; font-size:15px; letter-spacing:-1px; font-family:Franklin Gothic Demi, georgia;}
div#footer a:hover { color: #B2CCED; padding: 10px 0 10px 10px; }
div#footer li.viewing { padding: 0; }
ul.navfooter { padding: 0; margin: 0; }
ul.navfooter li { padding: 0; margin: 0; list-style: none; display: inline;}
/* ---------- SIDEBAR ---------- */
#sidebar { float: right; width: 140px; padding: 15px; margin: 0 0 8px 0; background: transparent;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited { text-decoration: none; font-weight:; Franklin Gothic Demi, georgia; font-size:22px; color:#98B7EA; letter-spacing:-2px; line-height:13px;}
div#sidebar a:hover { text-decoration: none; color: #98B7EA; border:0px;}
#sidebar b { font-weight: lighter; }
.sbarheader, .sbarbody { padding: 0; text-align: left; line-height: 1.7em; }
.sbarbody2 { padding-bottom: 0px; text-align: left; line-height: 1.7em; }
ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; }
li.sbaritem, .sbar { display: block; text-transform: lowercase; text-align: left; list-style: none; background: url() transparent no-repeat; padding: 0 0 5px 0; }
/* ---------- COMMENTS ---------- */
.comments { text-align: right; color: #98B7EA; clear: left; position: relative; margin: 50px -90px 0 0; padding: 10px 0 0 0; text-transform: lowercase; background:transparent; font-family:Franklin Gothic Demi, georgia; font-size:1px!important; letter-spacing:-5px; }
div.comments a, div.comments a:link, div.comments a:visited { color: #f7f7f7; padding: 3px; text-transform: lowercase; letter-spacing: -2px; font-family:Franklin Gothic Demi, georgia; font-size:19px!important; }
div.comments a:hover { color: #EFEFEF; padding: 3px; text-transform: lowercase; letter-spacing: -2px; font-family:Franklin Gothic Demi, georgia; font-size:19px!important }
/* ------- COMMENT PAGE ---------*/
.datesubjectcomment
-moz-border-radius-bottomleft:3%;
-moz-border-radius-bottomright:3%;
-moz-border-radius-topleft:3%;
-moz-border-radius-topright:3%;
background-color:#98B7EA;
margin-right:90px;
padding:10px 50px 11px 20px;
}
.userpiccomment {
position: relative;
border: none;
background-color: #F7F7F7;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border: none;
}
.box {
border-style: none;
border-width: 0px 0px 0px 0px;
padding: 10px;
clear: right;
}
textarea {
background-color: #F7F7F7;
color: #8C8989;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: right;
line-height: 125%;
background-color: #ffffff;
color: #cecece;
}
.replytosubject {
font-weight: normal;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #8C8989;
}
.commentbox {
border-color: #B2CCED;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
-moz-border-radius: 3.0%;
background-color: #98B7EA;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #A0C1B9;
}
.datesubjectcomment a:hover {
color: #A0C1B9;
}
.commentboxpartial {
border-color: #B2CCED;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #98B7EA;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: right;
}
/* ---------- MISC ---------- */
object { display: none; }
a:active {outline: none; }
b, i, s, u, .emphasise, strike, overline { color:;font-weight:bold;}
p, td, table { border: 0px !important; }
center { margin-bottom: -8px; }
li.sbartitle, #footer .viewing, .clearfoot, .subtitle, .defaultuserpic, .date, .ljtags, .currents, .currentmood, .currentmusic, .currentlocation, .clear, .skiplinks, .box, ul.navheader { display: none; }
.userpic, .userpicfriends {
float: right;
background-color: #f7f7f7 !important;
padding:3px;
-moz-border-radius: 3.0%;
text-align: center;
width: 100px; height: 100px;
margin: 10px 11px 50px; z-index: 15;
}
.userpic img, .userpicfriends img { width: 100px; height: 100px;}
.userpicfriends font, .userpicfriends a {color:#a0c1b9!important;}
div.ContextualPopup .Content {
padding: 10px;
margin: 4px 59px 4px 4px;
background:#98B7EA; font-size: 9px; color:#F7F7F7; font-family:arial;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold;
font-size: 9px; color:#878c8b!important; font-family:arial;
}
.ljtaglist {
list-style-type:none; color:#98B7EA!important;
}
.ljtaglist a {
color:#98B7EA!important;
}
/* ---- PLACEHOLDER & USERPICS ---- */
.separator { height: 9px; margin: 0; }
span.ljuser a b, span.ljuser a {color: #898989; font-weight: bold; }
span.ljuser a:hover b { color: #EEEFEF; font-weight: bold; border:0px!important;}
.ljuser {color: #898989; font-weight: bold !important; }
.title {font-family: Franklin Gothic Demi, georgia; font-size:36px; color:#98B7EA; letter-spacing:-3px; padding: 7px; margin: 0px 120px; }
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"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
img[src*="icon_private.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
img[src*="icon_groups.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important;}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important;}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important;}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important;}
img[src*="btn_del.gif"]{background-image: url();}
img[src*="btn_scr.gif"] {background-image: url();}
img[src*="btn_unscr.gif"] {background-image: url();}
img[src*="btn_freeze.gif"] {background-image: url();}
img[src*="btn_unfreeze.gif"] {background-image: url();}
img[src*="btn_track.gif"] {background-image: url();}
img[src*="btn_tracking.gif"] {background-image: url();}
img[src*="btn_tracking_thread.gif"] {background-image: url();}
img[src*="anonymous.gif"] {background-image: url();}
img[src*="openid-profile.gif"] {background-image: url();}
img[src*="userinfo.gif"] {background-image: url();}
img[src*="talk/none.gif"] {background-image: url();}
img[src*="help.gif"] {background-image: url();}
img[src*="pencil.gif"] {background-image: url();}
img[src*="btn_edit.gif"] {background-image: url();}
.ljuser img {width: 0; height: 0; background: transparent url(http://i39.tinypic.com/6r7qt5.gif) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i39.tinypic.com/6r7qt5.gif) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i43.tinypic.com/1f8rrl.gif) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
Style Name: Flexible Squares
Account Type: Plus
Problem/Question:
Problem 1: Custom Comment Page
I'm using this layout by cielo_gris (which is for Basic Accounts only), so it doesn't have a custom comment page. But I really would like to have that, so I tried to make it on my own.
So, here's the problem: No matter what I change, nothing shows up on the comment page.
I actually have no clue about coding but so far I was always successful with tweaking layouts, but now I really have no idea what could be wrong or missing. I hope this is okay here. I'd be thankful for any help.
Problem 2: Userpics in IE.
In Firefox the layout works just fine, but in IE the userpics are choped off.
Thanks in advance!
/* Cleaned CSS: */
/* SUENOS AZULES
layout by cielo_gris */
/* ---------- MAIN ---------- */
body { background: url('http://i208.photobucket.com/albums/bb25/sarith_x/Header/candiiconheader4.png') bottom right no-repeat #f8f8f8; background-attachment: fixed;
color: #a4a4a4;
; text-align: justify; color: #898989; font: 9px arial, corbel, Georgia; font-weight:bold; margin: 75px 0 75px 0; text-transform: lowercase; line-height:11px!important;}
img, .img {max-width:230px; max-height:230px;}
::-moz-selection { background: #F8F8F8; color: #98B7EA; }
a, a:link, a:visited { color: #f8f8f8; text-decoration: none; font-weight: bold; }
a:hover { color: #8a9290; text-decoration: none; font-weight: bold; }
.subject a, .subject a:link, .subject a:visited, .subject a:hover { font-family: georgia; font-size:13px; color:#eeefef; letter-spacing:-1px; border:0px; text-transform:uppercase; }
.subject {background-color:#98B7EA; padding: 10px 50px 11px 20px; margin-right:90px; -moz-border-radius: 3.0%; }
#content { width: 780px; margin: auto; background: transparent; min-height:170px!important; }
#maincontent { margin: 0 120px 0 0; width: auto; padding: 100; background: transparent; }
/* ---------- ENTRIES ---------- */
.subcontent {margin: 0 50px 50px 50px; padding: 0px; background: #B2CCED; -moz-border-radius: 3.0%; }
.entry { line-height:10px!important; text-align: justify; background-color:#98B7EA; padding: 30px 50px 0 20px; margin-right:90px; -moz-border-radius: 3.0%; margin-top:-10px; }
.entry a:hover{border-bottom:2px solid #f8f8f8;}
hr { color: transparent; height: 1px; border-style : none; }
/* ---------- HEADER&FOOTER---------- */
#footer { clear: both; width: auto; padding: 20px; text-align: left; text-transform: lowercase; letter-spacing: 1px; z-index: 100; background:transparent; margin: 0px 0px 0px 30px; }
div#footer a, div#footer a:link, div#footer a:visited { color: #98B7EA; padding: 10px 0 10px 10px; font-size:15px; letter-spacing:-1px; font-family:Franklin Gothic Demi, georgia;}
div#footer a:hover { color: #B2CCED; padding: 10px 0 10px 10px; }
div#footer li.viewing { padding: 0; }
ul.navfooter { padding: 0; margin: 0; }
ul.navfooter li { padding: 0; margin: 0; list-style: none; display: inline;}
/* ---------- SIDEBAR ---------- */
#sidebar { float: right; width: 140px; padding: 15px; margin: 0 0 8px 0; background: transparent;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited { text-decoration: none; font-weight:; Franklin Gothic Demi, georgia; font-size:22px; color:#98B7EA; letter-spacing:-2px; line-height:13px;}
div#sidebar a:hover { text-decoration: none; color: #98B7EA; border:0px;}
#sidebar b { font-weight: lighter; }
.sbarheader, .sbarbody { padding: 0; text-align: left; line-height: 1.7em; }
.sbarbody2 { padding-bottom: 0px; text-align: left; line-height: 1.7em; }
ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; }
li.sbaritem, .sbar { display: block; text-transform: lowercase; text-align: left; list-style: none; background: url() transparent no-repeat; padding: 0 0 5px 0; }
/* ---------- COMMENTS ---------- */
.comments { text-align: right; color: #98B7EA; clear: left; position: relative; margin: 50px -90px 0 0; padding: 10px 0 0 0; text-transform: lowercase; background:transparent; font-family:Franklin Gothic Demi, georgia; font-size:1px!important; letter-spacing:-5px; }
div.comments a, div.comments a:link, div.comments a:visited { color: #f7f7f7; padding: 3px; text-transform: lowercase; letter-spacing: -2px; font-family:Franklin Gothic Demi, georgia; font-size:19px!important; }
div.comments a:hover { color: #EFEFEF; padding: 3px; text-transform: lowercase; letter-spacing: -2px; font-family:Franklin Gothic Demi, georgia; font-size:19px!important }
/* ------- COMMENT PAGE ---------*/
.datesubjectcomment
-moz-border-radius-bottomleft:3%;
-moz-border-radius-bottomright:3%;
-moz-border-radius-topleft:3%;
-moz-border-radius-topright:3%;
background-color:#98B7EA;
margin-right:90px;
padding:10px 50px 11px 20px;
}
.userpiccomment {
position: relative;
border: none;
background-color: #F7F7F7;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border: none;
}
.box {
border-style: none;
border-width: 0px 0px 0px 0px;
padding: 10px;
clear: right;
}
textarea {
background-color: #F7F7F7;
color: #8C8989;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: right;
line-height: 125%;
background-color: #ffffff;
color: #cecece;
}
.replytosubject {
font-weight: normal;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #8C8989;
}
.commentbox {
border-color: #B2CCED;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
-moz-border-radius: 3.0%;
background-color: #98B7EA;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #A0C1B9;
}
.datesubjectcomment a:hover {
color: #A0C1B9;
}
.commentboxpartial {
border-color: #B2CCED;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #98B7EA;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: right;
}
/* ---------- MISC ---------- */
object { display: none; }
a:active {outline: none; }
b, i, s, u, .emphasise, strike, overline { color:;font-weight:bold;}
p, td, table { border: 0px !important; }
center { margin-bottom: -8px; }
li.sbartitle, #footer .viewing, .clearfoot, .subtitle, .defaultuserpic, .date, .ljtags, .currents, .currentmood, .currentmusic, .currentlocation, .clear, .skiplinks, .box, ul.navheader { display: none; }
.userpic, .userpicfriends {
float: right;
background-color: #f7f7f7 !important;
padding:3px;
-moz-border-radius: 3.0%;
text-align: center;
width: 100px; height: 100px;
margin: 10px 11px 50px; z-index: 15;
}
.userpic img, .userpicfriends img { width: 100px; height: 100px;}
.userpicfriends font, .userpicfriends a {color:#a0c1b9!important;}
div.ContextualPopup .Content {
padding: 10px;
margin: 4px 59px 4px 4px;
background:#98B7EA; font-size: 9px; color:#F7F7F7; font-family:arial;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold;
font-size: 9px; color:#878c8b!important; font-family:arial;
}
.ljtaglist {
list-style-type:none; color:#98B7EA!important;
}
.ljtaglist a {
color:#98B7EA!important;
}
/* ---- PLACEHOLDER & USERPICS ---- */
.separator { height: 9px; margin: 0; }
span.ljuser a b, span.ljuser a {color: #898989; font-weight: bold; }
span.ljuser a:hover b { color: #EEEFEF; font-weight: bold; border:0px!important;}
.ljuser {color: #898989; font-weight: bold !important; }
.title {font-family: Franklin Gothic Demi, georgia; font-size:36px; color:#98B7EA; letter-spacing:-3px; padding: 7px; margin: 0px 120px; }
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"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
;}){kind=link}
img[src*="icon_private.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
img[src*="icon_groups.gif"]{background-image: url(http://i42.tinypic.com/2ppea9j.gif);}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important;}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important;}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important;}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important;}
img[src*="btn_del.gif"]{background-image: url();}
img[src*="btn_scr.gif"] {background-image: url();}
img[src*="btn_unscr.gif"] {background-image: url();}
img[src*="btn_freeze.gif"] {background-image: url();}
img[src*="btn_unfreeze.gif"] {background-image: url();}
img[src*="btn_track.gif"] {background-image: url();}
img[src*="btn_tracking.gif"] {background-image: url();}
img[src*="btn_tracking_thread.gif"] {background-image: url();}
img[src*="anonymous.gif"] {background-image: url();}
img[src*="openid-profile.gif"] {background-image: url();}
img[src*="userinfo.gif"] {background-image: url();}
img[src*="talk/none.gif"] {background-image: url();}
img[src*="help.gif"] {background-image: url();}
img[src*="pencil.gif"] {background-image: url();}
img[src*="btn_edit.gif"] {background-image: url();}
.ljuser img {width: 0; height: 0; background: transparent url(http://i39.tinypic.com/6r7qt5.gif) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i39.tinypic.com/6r7qt5.gif) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i43.tinypic.com/1f8rrl.gif) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
