View Full Version : LiveJournal CSS Assistance


kelbellene
07-25-2005, 08:37 PM
Hi there. I made a LiveJournal layout by modding another layout, so I don't know the code very well and am having a few problems. Hopefully someone here knows exactly what is going on. I'm fairly new to CSS.

First of all, the entries on the Friends (http://www.livejournal.com/users/kelbellene/friends) page are starting too high up. They should start at the same hight as the menu on the right. The code seems to be identical to the Recent Entries (http://www.livejournal.com/users/kelbellene) page, so I don't know why the entries are starting higher.

Next, the entry dates have an end bracket (]) after them, but no front bracket. I'd like to just get rid of the end bracket.

Finally, when viewed in IE the entry date and title run together. If viewed in Firefox it looks fine.

http://www.livejournal.com/users/kelbellene/
Code:
FRIENDS_HEAD<=
<style type="text/css">
div div{visibility:hidden;position:absolute;top:1px;}
tr.caption{visibility:hidden;position:absolute;top :1px}
<!--
a:link, a:visited, a:active {
text-decoration: none;
color: #D9DCB8;
}
a:hover{
text-decoration: none;
color: #D9DCB8;
text-decoration: underline;
}
body,font,td {
font-family: verdana;
color: #23261A;
font-size: 8pt;
text-align:left;
overflow-x: hidden;
margin-top: 242;
text-align: left;
}
.entrybox{

z-index: 3;
position: relative;

}
<xx-html>body .entrybox{
top: 0;
}
.entrybox td{
text-align: left;
padding: 0;
}

.entrybox b{
display: inline;
}
.entrybox .index, .comments{
text-align: right;
}
<xx-html>body .entrybox .index, <xx-html>body .entrybox .caption{
display: table-cell;
}


body {
background: #778158;
background-attachment: fixed;
background-repeat: repeat-y;
}

div div {
width:100%;
}

table, tr, td, .shadowed {
background: transparent;
}

div, p {
font-size: 8pt;
}

table {
width: 435px;
margin-left: 56px;
margin-right: 100%;

}

table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
.entrybox td.index{
display: none;
}
/* display of date and time */
p .index2 {
font-size: 9pt;
text-transform: center;
color: #23261A;
}
p table table td.caption {
color: #23261A;
font-size: 9pt;
font-weight: bold;
visibility: visible;
}
table.entrybox td.caption{
position: relative;
top: 1.5em;
}
table.entrybox td.index{
position: relative;
top: -1.5em;
font-size: 9;
font-family: verdana;
}
.comments {background-image: url(http://img.photobucket.com/albums/v219/kelbellne/layout/comments.jpg); height: 30px; background-repeat: no-repeat;}
-->
</style>
<=FRIENDS_HEAD

FRIENDS_WEBSITE<=
<div style="position:absolute; top:370; left: 516; width: 200; height: 15; visibility: visible; id=scroll3; class=side; z-index:2; text-align:right;">
<b>::MENU::</b><br>
<b><a href="http://www.livejournal.com/userinfo.bml?user=kelbellene">Profile</a></b><br>
<b><a href="http://www.livejournal.com/users/kelbellene">Recent</a></b><br>
<b><a href="http://www.livejournal.com/users/kelbellene/calendar">Calendar</a></b><br>
<b><a href="http://www.livejournal.com/tools/memories.bml?user=kelbellene">Memories</a></b><br>
<b><a href="http://livejournal.com/update.bml">Update</a></b><br>
<b><a href="http://livejournal.com/modify.bml">Modify</a></b><br>
<b><a href="http://www.urbancreations.com/" target="_blank">Urban Creations</a></b>
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/1.png">
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/2.png">
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/3.png">
<p>&nbsp;</p>
</div>

<img
src="http://img.photobucket.com/albums/v219/kelbellne/layout/telenovela.jpg"
class="x" scroll="no">


<style type="text/css">
<!--
table table table table .meta {visibility: hidden}
table table table table table .meta {visibility: visible}
.x {
position:absolute; left:50; top:0; z-index: 1; }
.y {
position:absolute; left:434; top:0; z-index: 1; }

.shadowed td div {
position: absolute;
top: 1px
}
-->
</style>
<=FRIENDS_WEBSITE

LASTN_HEAD<=
<style type="text/css">
div div{visibility:hidden;position:absolute;top:1px;}
tr.caption{visibility:hidden;position:absolute;top :1px}
<!--
a:link, a:visited, a:active {
text-decoration: none;
color: #D9DCB8;
}
a:hover{
text-decoration: none;
color: #D9DCB8;
text-decoration: underline;
}
body,font,td {
font-family: verdana;
color: #23261A;
font-size: 8pt;
text-align:left;
overflow-x: hidden;
margin-top: 242;
text-align: left;
}
.entrybox{

z-index: 3;
position: relative;

}
<xx-html>body .entrybox{
top: 0;
}
.entrybox td{
text-align: left;
padding: 0;
}

.entrybox b{
display: inline;
}
.entrybox .index, .comments{
text-align: right;
}
<xx-html>body .entrybox .index, <xx-html>body .entrybox .caption{
display: table-cell;
}


body {
background: #778158;
background-attachment: fixed;
background-repeat: repeat-y;
}

div div {
width:100%;
}

table, tr, td, .shadowed {
background: transparent;
}

div, p {
font-size: 8pt;
}

table {
width: 435px;
margin-left: 56px;
margin-right: 100%;

}

table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
.entrybox td.index{
display: none;
}
/* display of date and time */
p .index2 {
font-size: 9pt;
text-transform: center;
color: #23261A;
}
p table table td.caption {
color: #23261A;
font-size: 9pt;
font-weight: bold;
visibility: visible;
}
table.entrybox td.caption{
position: relative;
top: 1.5em;
}
table.entrybox td.index{
position: relative;
top: -1.5em;
font-size: 9;
font-family: verdana;
}
.comments {background-image: url(http://img.photobucket.com/albums/v219/kelbellne/layout/comments.jpg); height: 30px; background-repeat: no-repeat;}
-->
</style>
<=LASTN_HEAD

LASTN_TALK_LINKS<=
<p>
<tr>
<td colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments" style="text-align: right">
%%readlink%% <a href="%%urlpost%%">COMMENT</a> + <a href=http://www.livejournal.com/tools/memadd.bml?%%itemargs%%>ADD</a> + <a href=http://www.livejournal.com/editjournal_do.bml?%%itemargs%%>EDIT</a></FONT>
</td>
</tr>
<=LASTN_TALK_LINKS

FRIENDS_TALK_LINKS<=
<p>
<tr>
<td colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments" style="text-align: right">
%%readlink%% <a href="%%urlpost%%">COMMENT</a> + <a href=http://www.livejournal.com/tools/memadd.bml?%%itemargs%%>ADD</a> + <a href=http://www.livejournal.com/editjournal_do.bml?%%itemargs%%>EDIT</a></FONT>
</td>
</tr>
<=FRIENDS_TALK_LINKS

LASTN_TALK_READLINK=><a href="%%urlread%%">READ %%messagecount%%</b></a> +

LASTN_DATE_FORMAT<=
</td></tr>
<tr><td class="index2"><span style="color: black; font-weight: bold; font-family: verdana; font-size: 10;">%%daylong%%</span> <span style="color: black; font-weight: bold; font-family: verdana; font-size: 9;">The %%dth%% of %%monlong%% at %%12h%%:%%min%%%%ampm%%</span>
<=LASTN_DATE_FORMAT

FRIENDS_TALK_READLINK=><a href="%%urlread%%">READ %%messagecount%%</b></a> +

FRIENDS_DATE_FORMAT<=
</td></tr>
<tr><td class="index2"><span style="color: black; font-weight: bold; font-family: verdana; font-size: 10;">%%daylong%%</span> <span style="color: black; font-weight: bold; font-family: verdana; font-size: 9;">The %%dth%% of %%monlong%% at %%12h%%:%%min%%%%ampm%%</span>
<=FRIENDS_DATE_FORMAT

LASTN_WEBSITE<=
<div style="position:absolute; top:370; left: 516; width: 200; height: 15; visibility: visible; id=scroll3; class=side; z-index:2; text-align:right;">
<b>::MENU::</b><br>
<b><a href="http://www.livejournal.com/userinfo.bml?user=kelbellene">Profile</a></b><br>
<b><a href="http://www.livejournal.com/users/kelbellene/friends">Friends</a></b><br>
<b><a href="http://www.livejournal.com/users/kelbellene/calendar">Calendar</a></b><br>
<b><a href="http://www.livejournal.com/tools/memories.bml?user=kelbellene">Memories</a></b><br>
<b><a href="http://livejournal.com/update.bml">Update</a></b><br>
<b><a href="http://livejournal.com/modify.bml">Modify</a></b><br>
<b><a href="http://www.yoursite.com/" target="_blank">Your Site</a></b>
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/1.png">
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/2.png">
<p>&nbsp;</p>
<img src="http://img.photobucket.com/albums/v219/kelbellne/layout/3.png">
<p>&nbsp;</p>
</div>

<img
src="http://img.photobucket.com/albums/v219/kelbellne/layout/telenovela.jpg"
class="x" scroll="no">

<style type="text/css">
<!--
table table table table .meta {visibility: hidden}
table table table table table .meta {visibility: visible}
.x {
position:absolute; left:50; top:0; z-index: 1; }
.y {
position:absolute; left:434; top:0; z-index: 1; }

.shadowed td div {
position: absolute;
top: 1px
}
-->
</style>
<=LASTN_WEBSITE

Merike
07-27-2005, 08:23 PM
Could you first remove this bit from body since css goes only in the head section.

<style type="text/css">
<!--
table table table table .meta {visibility: hidden}
table table table table table .meta {visibility: visible}
.x {
position:absolute; left:50; top:0; z-index: 1; }
.y {
position:absolute; left:434; top:0; z-index: 1; }

.shadowed td div {
position: absolute;
top: 1px
}
-->
</style>