Borders around userpics / Comments disappearing

[rigel_7]

I've finally taken the plunge over to S2 (huzzah!) as Expressive is fantastically friendly to customise what with the CSS allowing you to override just about every single little detail :D

I've been converting my S1 Layout to Expressive, and so far it looks exactly as I want it. There's only three very slight problems.

I have a paid account, my journal is linnet_101 and I am using a custom theme layer #7507383


putting a padded border around userpics - SOLVED!

In my old layout, I had styled the userpics that displayed on my friends page thusly (screenshot): (yes... slight obsession with Stargate :D)



as a padded border that appeared around all the pics. I cheated a bit and had 2 CSS classes to achieve this: one that set a 1px border around the userpic itself, and the other that set the padded 5px border and outer 1px black border. (being S1 I could go a tad CSS crazy)

So far with S2 expressive I have managed to make it look like this (screenshot):



voila padded border (hooray!), but sadly the absence of the 1px black borders :(

I used the following CSS to do that:

.user-icon {
width: 100px;
border: 1px;
border-color: #000000;
padding: 10px;
background-color: #EAD7B1;
margin-bottom : 25px;
}

and I've tried as many different ways as I can think of to make the border appear to no avail, even removing the padding and background-color to just have a 1px black border (it won't even do that!). I'm not too fussed that the background colour envelops the usernames (although if anyone knows how I can separate them I'll definitely do so.

Any help will be hugely appreciated!

*edits*
Solved by changing the CSS slightly and following av8rmike's suggestions in the comments.


removing a horizontal scrollbar in Firefox - SOLVED!

The other slight bug is that a horizontal scrollbar appears in Firefox.
Oddly enough, the journal content is centered somewhat in Firefox (entirely accidental there, because in IE it is most definitely towards the left of the page)

It's a minor bug, and an entirely cosmetic one - but I would like to kill it. :D

*edits*
Solved, by defining the widths of #container, #container-inner, #page and #page-inner.


comment overflow disappearing under journal edge

When comments branch out (more than 1 reply to a comment), the text of the comment disappears underneath the edge of the #alpha column like this (screenshot):



I think it may have something to do with the fact that I have the alpha overflow set to hidden (which fixed a layout alignment problem in IE)

*edits* Yep, it's the alpha overflow - but so far no solutions.
I have a feeling it's because I set the journal width to 800px, which is not wide enough to accommodate the comments.

For now I've redone my header and reset the journal back to the default width.

any suggestions?

my custom CSS (which is rather extensive):

body {margin: 0px 0px 0px 0px;
background-color: #EAD7B1;
background-image:url(http://i64.photobucket.com/albums/h182/rigel_orion/layout/papyrustile.jpg);
background-attachment: scroll;
background-repeat: repeat;
cursor: crosshair;
}

hr {
width: 50%;
align: center;
}

/* links, colours etc */

A:link
{ color: #7C7171;
font-weight:bold;
text-decoration:none;
cursor: crosshair;
}

A:visited
{ color: #7C7171;
font-weight:bold;
text-decoration:none;
cursor: crosshair;
}

A:active
{ color:#000000;
font-weight:bold;
text-decoration: underline;
cursor: crosshair;
}

A:hover
{ color:#000000;
text-decoration: underline;
cursor: crosshair;
}

/* user icon */

.user-icon {
width: 100px;
border: 1px solid #000000;
padding: 10px;
background-color: #EAD7B1;
margin-bottom : 25px;
}

/* page width */

#container, #container-inner {
width: 702px;
align: center;
margin-left: 25px;
}

#page, #page-inner {
align: center;
width: 702px;
background-image:url(http://i64.photobucket.com/albums/h182/rigel_orion/layout/papyrustile.jpg);
background-repeat: repeat;
}

#content {
position: relative;
align: center;
width: 702px;
}

#content-inner {
position: relative;
align: center;
width: 702px;
}

.layout-tw #content {
background-image: none;
width: 702px;
}

.layout-tw #header {
background-image: none;
}

/* header */

#header {
align: left;
width: 700px;
height: 385px;
}

#header-inner {
background-image: url("http://i64.photobucket.com/albums/h182/rigel_orion/layout/header2.jpg");
position: relative;
height: 345px;
width: 700px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: none;
border-right: 1px solid black;
}

/* remove links on header */

#header-name { display:none; }
#header-description { display: none; }
.nav { display: none; }

/* header imagemap */

/* Set the size of the definition list dl and add the background image. */
#imap {
display:block;
background:url("http://i64.photobucket.com/albums/h182/rigel_orion/layout/header2.jpg") no-repeat;
position:relative;
}

/* Place the dd's in the correct absolute position. */
#imap dd {
position:absolute;
padding:0;
margin:0;
}
#imap #entries {
left:398px;
top:-50px;
z-index:20;
}
#imap #friends {
left:398px;
top:37px;
z-index:20;
}
#imap #archive {
left:398px;
top:114px;
z-index:20;
}
#imap #profile {
left:398px;
top:198px;
z-index:20;
}

/* Style the dd and a links physical size and the background for the hover. */
#imap a#entries {
display:block;
width:202px;
height:87px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#friends {
display:block;
width:202px;
height:77px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#archive {
display:block;
width:202px;
height:85px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a#profile {
display:block;
width:202px;
height:88px;
background:transparent url -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}

/* style the span text so that it is not displayed */
#imap a span, #imap a:visited span {
display:none;
}

/* posts (alpha column) */

#alpha {
align: left;
width: 550px;
background-color: #FFF3DA;
border:1px solid black;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#alpha-inner {
align: left;
width: 550px;
align: left;
margin: 0px;
padding: 0px;
overflow-x: scroll;
}

.asset {
align: left;
width: 500px;
text-align: justify;
}

.asset-inner {
align: left;
width: 500px;
text-align: justify;
}

.asset-content, asset-footer;{
width: 500px;
}

.post-asset {
align: left;
width: 500px;
text-align: justify;
margin-left: 15px;
margin-right: 15px;
}

.entry-content {clear: left;}

.stream-asset {
width: 500px;
}

/* sticky post */

.asset-name-hover {
width: 85%;
color: #000000;
background-color: #FFF3DA;
padding-left: 10px;
border: 1px solid black;
}

/* post meta styling */

.asset-body blockquote {
border-left-color : #EAD7B1;
}

.asset-header {
width: 500px;
background-color: #EAD7B1;
border: 1px solid black;
margin-top: 10px;
}

.asset-name {
margin-left: 25px;
margin-top: 10px;
padding-right: 15px;
}

.asset-meta {
height: 20px;
width: 90%;
background-color: #D1BC91;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-color : #000000;
font-weight:normal;
text-align:left;
font-size: .95em;
padding-left: 5px;
margin-left: 20px;
margin-right: 10px;
}

.datetime {
color: #000000;
}

.asset-meta-list a:link {
color: #7C7171;
text-decoration:none;
}

.asset-meta-list a:hover {
color: #000000;
text-decoration: underline;
}

.asset-meta-list a:visited {
color: #000000;
text-decoration:none;
}

.asset-meta-list a:active {
color: #000000;
text-decoration:underline;
}

.prevnext {
height: 20px;
width: 540px;
padding-left: 10px;
margin-top: 12px;
background-color: #EAD7B1;
border-top: 1px solid black;
border-right: none;
border-bottom: 1px solid black;
border-left: none;
border-color : #000000;
}

/* sidebar (beta column) */

#beta {
width: 148px;
background-color: #EAD7B1;
border-top: 1px solid black;
border-right: none;
border-bottom: 1px solid black;
border-left: 1px solid black;
}

#beta-inner, widget-inner, widget-footer {
width:148px;
}

.widget-content {
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFF3DA;
border-left: none;
border-top: 1px solid black;
border-right: none;
border-bottom: 1px solid black;
text-align: justify;
}

.widget-header {
width: 148px;
margin-top: 5px;
margin-bottom: 5px;
color: #000000;
}

/* comments */

.comments-inner {
overflow: visible;
}

.comments-header {
margin-left: 15px;
color : #000000;
}

.comment {
overflow: visible;
}

.comment-even {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-color : #000000;
background-color : #FFF3DA;
width: 480px;
text-align: justify;
overflow: visible;
}

.comment-odd {
margin-left: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-color : #000000;
background-color : #EAD7B1;
width: 480px;
text-align: justify;
overflow: visible;
}

.comment-links {
height: 20px;
width: 95%;
background-color: #D1BC91;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-color : #000000;
font-weight:normal;
text-align:left;
font-size: .95em;
padding-left: 10px;
}

#comment-form textarea {
border-color: #EAD7B1;
}

.comment-form-footer input {
border-color: #EAD7B1;
}

.quickreply {
align: left;
}

/* calendar */

ul.year {
align: left;
margin-top: 15px;
}

table.yeartable {
align: left;
margin-left: 95px;
}

table.yeartable td.yearday {
background-color: #EAD7B1;
}

/* comment form styling /*

.replyform {
width: 480px;
background-color: #FFF3DA;
margin-left:20px;
margin-bottom: 15px;
padding-bottom: 15px;
border: 1px solid black;
overflow: visible;
}

.quickreply {
width: 470px;
background-color: #FFF3DA;
margin-left: 20px;
margin-bottom: 15px;
padding-bottom: 15px;
overflow: visible;
}

Any suggestions on how to fix these?
I will love you forever!