Icon Display Issues, Entry Comment Bar, Shared Theme
I recently designed a layout in Flexible Squares using just CSS, no theme layer. I'm pretty much fine with the way the layout displays on my journal, but when I made it available for sharing, I noticed that it seemed to have display issues issues in other journals.
Here is what the layout looks like in my journal and here is what is looks like on two other journals (1, 2 -- both of these journals are Plus Accounts, I have a Paid Account).
My original CSS is
body {
background-color: #fffdef;
background-image: url('http://pics.livejournal.com/exchangediary/pic/001w21rh');
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
text-align: center;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 0px 0;
}
a, a:link, a:visited {
color: #919bad;
text-decoration: none;
}
a:hover {
color: #919bad;
text-decoration: underline;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 75%;
margin-left: 160px; margin-right: auto;
background-color: #fffdef;
border-width: 0px;
padding: 0px;
}
#maincontent {
width: 75%;
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #fffdef;
color: #000000;
border-style: solid;
border-color: #919bad;
border-width: 0px;
margin-right: 180px;
text-align: left;
position: relative;
}
#sidebar {
margin: -39px;
padding-top: 15px;
background-color: #d2ccc2;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
border-style: solid;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #919bad;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 75%;
padding: 10px 0px 10px 0px;
margin: 0px;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
border-style: solid;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
background-color: #d2ccc2;
color: #919bad;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #919bad;
padding: 5px;
border: 1px;
border-color: #919bad;
}
div#header a:hover, div#footer a:hover {
color: #919bad;
text-decoration: overline;
}
div#header a:active, div#footer a:active {
color: #919bad;
text-decoration: underline;
}
/*title and subtitle*/
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
.subtitle{
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
-----------------------------------------------------------------------*/
.subcontent {
margin-top: 35px;
position: relative;}
.entry {
margin: 0px 105px 10px 0px;
padding: 10px;
background-color: #d2ccc2;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
border-style: solid;
position: relative;
}
.userpic img {
max-width: 75px;
max-height: 75px;
padding: 5px;
position: relative;
}
.entryUserinfo-username {
display: none;
background-color: #d2ccc2;
}
.userpic {
position: relative;
float: right;
background-color: #d2ccc2;
padding: 5px;
margin: 0px 0px 0px 0px;
z-index: 15;
border-width: 1px;
border-color: #919bad;
border-style: solid;
margin: 0px;
}
.date {
line-height: 200%;
top: 5px;
color: #919bad;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.subject {
font-weight: normal;
color: #919bad;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 2px;
font-family: "Century Gothic", sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
.subject a, .subject a:link, .subject a:visited {
color: #919bad;
}
.subject a:hover {
color: #919bad;
text-decoration: none;
}
.datesubject {
background-color: #d2ccc2;
border-width: 1px 0px 0px 0px;
border-color: #919bad;
border-style: solid;
margin-left: 0px;
margin-right: 105px;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: right;
text-transform: uppercase;
letter-spacing: 2px;
background-color: #d2ccc2;
border-top: 1px solid #919bad;
padding: 5px 5px 0px 5px;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #919bad;
}
div.comments a:hover {
color: #919bad;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 10px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: right;
background-color: #d2ccc2 !important;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #919bad !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #919bad;
z-index: 15;
}
.userpicfriends img {
max-width: 75px;
max-height: 75px;
padding: 10px 10px 5px 10px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
padding: 5px;
border: 1px;
border-color: #919bad;
}
.sbarheader {
border: 1px 0px 1px 0px;
}
.sbarbody {
padding: 0px;
}
.sbarbody2 {
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #919bad;
}
div#sidebar a:hover {
color: #919bad;
text-decoration: underline overline;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
background-color: #fffdef;
border-width: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
a.hover text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding: 5px 0px 5px 10px;
list-style: none;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
background-color: #d2ccc2;
margin-bottom: 10px;
margin-top: 10px;
font-family: "Century Gothic" , sans serif;
font-size: 14;
letter-spacing: 2px;
text-transform: uppercase;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 61%;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background-color: #d2ccc2;
color: #000000;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
padding: 5px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
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: #919bad;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #919bad;
border-color: #919bad;
border-style: solid:
border-width: 1px 0px 1px 0px;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #d2ccc2;
background-color: #d2ccc2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
.box {
width: 80%;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
padding: 5px;
clear: left;
background-color: #d2ccc2;
}
form#qrform {
color: #000000 !important;
font-size: 9px !important;
background: #d2ccc2 !important;
border: 2px solid #d2ccc2 !important;
}
form#qrform table {
border: 0 !important;
}
form#qrform tbody a, form#postform tbody a {
color: #000000;
font-size: 9px;
}
form#qrform tbody a:hover, form#postform tbody a:hover {
color: #919bad;
text-decoration: underline;
}
input, textarea {
font-family:"Verdana", sans serif;
font-size: 7pt;
background-color:#fffdef;
border: 1px solid #919bad;
padding:3px;
}
select {
width: 25% !important;
font-family:"Verdana", sans serif;
font-size: 7pt;
background-color:#fffdef;
border: 1px solid #919bad;
color:#788090;
padding:3px;
}
textarea.textbox {
width: 100% !important;
font-size: 7pt;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #d4dce8;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}
.commentbox {
padding: 10px;
margin: 10px;
background-color: #d2ccc2;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #919bad;
text-decoration: underline;
}
.commentboxpartial {
border-color: #919bad;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #d4dce8;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 5px;
}
So, here are my questions:
1. SOLVED
In Journal #1, what's happening with the entry comment bar? It seems as though it's being pushed down outside of the entry box. Do you have any idea what's causing this and how it can be fixed/accounted for in the CSS? I tried playing around with installing a mood theme & the navigation strip on my own journal and neither one seemed to affect the entry comment bar. Does this have something to do with the differences between Paid/Plus Accounts?
2. SOLVED
In Journal #2, what on earth is happening? Do you think they've just enabled the layout incorrectly/with the wrong layout/with additional CSS? The formatting of their header is pretty off from what I have showing up in my journal, their sidebar is at the bottom of the page (beneath their entries), their tags and comment entry options are displaying in bulleted lists, etc. Does this have anything to do with my CSS or is it something the user is doing?
3. SOLVED
Both journals 1 and 2 (1, 2) have display issues with comments. In journal 1, most of the comment formatting held, but each comment has a black box around it (see an example here) -- is there anything I can do about this? This is not a problem I'm having with comments in my own journal (see an example here.) In journal #2, almost none of the formatting has held (see an example here. Again, is their anything in my CSS to account for this or do you think it's an issue of account levels or user implementation?
4. In my layout I've made the userpics on the main journal entries page and the friends' page smaller. 100x100 icons are displayed as 75x75. However, icons that are awkwardly sized (i.e. 100x75) are being resized to 100x100, resulting in distortion of the original image. Is there a way that I can resize icons while keeping them in proportion?
5. SOLVED (More or less)
Lastly, I tried my best to keep the top of the sidebar aligned with the top of the header. It looks fine in 1024x768 resolution, but if you make it much, much larger or much, much smaller, the alignment doesn't hold. I know the adjustments I made with margins were pretty clumsy, is there a cleaner way to align the margin with the header and to have the margin hold when there are drastic adjustments made to the width of the browser window?
I know I've loaded a lot of questions in here and I'm fairly new to this, so I'd appreciate any help at all. Even solving just one of these problems would be great. Thanks so much!
Here is what the layout looks like in my journal and here is what is looks like on two other journals (1, 2 -- both of these journals are Plus Accounts, I have a Paid Account).
My original CSS is
body {
background-color: #fffdef;
background-image: url('http://pics.livejournal.com/exchangediary/pic/001w21rh');
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
text-align: center;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 0px 0;
}
a, a:link, a:visited {
color: #919bad;
text-decoration: none;
}
a:hover {
color: #919bad;
text-decoration: underline;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 75%;
margin-left: 160px; margin-right: auto;
background-color: #fffdef;
border-width: 0px;
padding: 0px;
}
#maincontent {
width: 75%;
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #fffdef;
color: #000000;
border-style: solid;
border-color: #919bad;
border-width: 0px;
margin-right: 180px;
text-align: left;
position: relative;
}
#sidebar {
margin: -39px;
padding-top: 15px;
background-color: #d2ccc2;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
border-style: solid;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #919bad;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 75%;
padding: 10px 0px 10px 0px;
margin: 0px;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
border-style: solid;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
background-color: #d2ccc2;
color: #919bad;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #919bad;
padding: 5px;
border: 1px;
border-color: #919bad;
}
div#header a:hover, div#footer a:hover {
color: #919bad;
text-decoration: overline;
}
div#header a:active, div#footer a:active {
color: #919bad;
text-decoration: underline;
}
/*title and subtitle*/
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
.subtitle{
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
-----------------------------------------------------------------------*/
.subcontent {
margin-top: 35px;
position: relative;}
.entry {
margin: 0px 105px 10px 0px;
padding: 10px;
background-color: #d2ccc2;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
border-style: solid;
position: relative;
}
.userpic img {
max-width: 75px;
max-height: 75px;
padding: 5px;
position: relative;
}
.entryUserinfo-username {
display: none;
background-color: #d2ccc2;
}
.userpic {
position: relative;
float: right;
background-color: #d2ccc2;
padding: 5px;
margin: 0px 0px 0px 0px;
z-index: 15;
border-width: 1px;
border-color: #919bad;
border-style: solid;
margin: 0px;
}
.date {
line-height: 200%;
top: 5px;
color: #919bad;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.subject {
font-weight: normal;
color: #919bad;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 2px;
font-family: "Century Gothic", sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
.subject a, .subject a:link, .subject a:visited {
color: #919bad;
}
.subject a:hover {
color: #919bad;
text-decoration: none;
}
.datesubject {
background-color: #d2ccc2;
border-width: 1px 0px 0px 0px;
border-color: #919bad;
border-style: solid;
margin-left: 0px;
margin-right: 105px;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Century Gothic", sans-serif;
font-size: 12px;
text-align: right;
text-transform: uppercase;
letter-spacing: 2px;
background-color: #d2ccc2;
border-top: 1px solid #919bad;
padding: 5px 5px 0px 5px;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #919bad;
}
div.comments a:hover {
color: #919bad;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 10px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: right;
background-color: #d2ccc2 !important;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #919bad !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #919bad;
z-index: 15;
}
.userpicfriends img {
max-width: 75px;
max-height: 75px;
padding: 10px 10px 5px 10px;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
padding: 5px;
border: 1px;
border-color: #919bad;
}
.sbarheader {
border: 1px 0px 1px 0px;
}
.sbarbody {
padding: 0px;
}
.sbarbody2 {
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #919bad;
}
div#sidebar a:hover {
color: #919bad;
text-decoration: underline overline;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
background-color: #fffdef;
border-width: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
a.hover text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding: 5px 0px 5px 10px;
list-style: none;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
background-color: #d2ccc2;
margin-bottom: 10px;
margin-top: 10px;
font-family: "Century Gothic" , sans serif;
font-size: 14;
letter-spacing: 2px;
text-transform: uppercase;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 61%;
text-align: center;
font-family: "Century Gothic", sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background-color: #d2ccc2;
color: #000000;
border-color: #919bad;
border-width: 1px 0px 1px 0px;
padding: 5px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
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: #919bad;
}
table.yeartable td.yearday {
background-color: #d4dce8;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #919bad;
border-color: #919bad;
border-style: solid:
border-width: 1px 0px 1px 0px;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #d2ccc2;
background-color: #d2ccc2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
.box {
width: 80%;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #919bad;
padding: 5px;
clear: left;
background-color: #d2ccc2;
}
form#qrform {
color: #000000 !important;
font-size: 9px !important;
background: #d2ccc2 !important;
border: 2px solid #d2ccc2 !important;
}
form#qrform table {
border: 0 !important;
}
form#qrform tbody a, form#postform tbody a {
color: #000000;
font-size: 9px;
}
form#qrform tbody a:hover, form#postform tbody a:hover {
color: #919bad;
text-decoration: underline;
}
input, textarea {
font-family:"Verdana", sans serif;
font-size: 7pt;
background-color:#fffdef;
border: 1px solid #919bad;
padding:3px;
}
select {
width: 25% !important;
font-family:"Verdana", sans serif;
font-size: 7pt;
background-color:#fffdef;
border: 1px solid #919bad;
color:#788090;
padding:3px;
}
textarea.textbox {
width: 100% !important;
font-size: 7pt;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #d4dce8;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}
.commentbox {
padding: 10px;
margin: 10px;
background-color: #d2ccc2;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #919bad;
text-decoration: underline;
}
.commentboxpartial {
border-color: #919bad;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #d4dce8;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 5px;
}
So, here are my questions:
1. SOLVED
In Journal #1, what's happening with the entry comment bar? It seems as though it's being pushed down outside of the entry box. Do you have any idea what's causing this and how it can be fixed/accounted for in the CSS? I tried playing around with installing a mood theme & the navigation strip on my own journal and neither one seemed to affect the entry comment bar. Does this have something to do with the differences between Paid/Plus Accounts?
2. SOLVED
In Journal #2, what on earth is happening? Do you think they've just enabled the layout incorrectly/with the wrong layout/with additional CSS? The formatting of their header is pretty off from what I have showing up in my journal, their sidebar is at the bottom of the page (beneath their entries), their tags and comment entry options are displaying in bulleted lists, etc. Does this have anything to do with my CSS or is it something the user is doing?
3. SOLVED
Both journals 1 and 2 (1, 2) have display issues with comments. In journal 1, most of the comment formatting held, but each comment has a black box around it (see an example here) -- is there anything I can do about this? This is not a problem I'm having with comments in my own journal (see an example here.) In journal #2, almost none of the formatting has held (see an example here. Again, is their anything in my CSS to account for this or do you think it's an issue of account levels or user implementation?
4. In my layout I've made the userpics on the main journal entries page and the friends' page smaller. 100x100 icons are displayed as 75x75. However, icons that are awkwardly sized (i.e. 100x75) are being resized to 100x100, resulting in distortion of the original image. Is there a way that I can resize icons while keeping them in proportion?
5. SOLVED (More or less)
Lastly, I tried my best to keep the top of the sidebar aligned with the top of the header. It looks fine in 1024x768 resolution, but if you make it much, much larger or much, much smaller, the alignment doesn't hold. I know the adjustments I made with margins were pretty clumsy, is there a cleaner way to align the margin with the header and to have the margin hold when there are drastic adjustments made to the width of the browser window?
I know I've loaded a lot of questions in here and I'm fairly new to this, so I'd appreciate any help at all. Even solving just one of these problems would be great. Thanks so much!