Friends' page.

[cabaretnight]

Sorry to post twice in a row. I usually work on S1 layouts, but I'm currently learning how to customize smoothsailing layouts.


I use both Firefox and IE 7. However, whenever entries on my friends' page exceed my pageblock width, the whole friends page will get screwed up, but only in IE 7. For firefox, there will be a scrollbar, so everything is fine.

Is there anyway to overcome this for IE 7?

Live preview: theguinealayout

My codes:

/* PAGE */

body {
font-family: Tahoma;
font-size: 10px;
background-color: #FFFFFF;
color: #000000;
background-image: url;
cursor: help;
padding: 10px;
overflow: auto;
}

a {
color: #000000;
}

a:visited {
color: #999999;
}

.pageblock{
border: 1px solid #CCCCCC;
width: 620px;
margin: auto;
}

.pagefooterblock {
background-color: #CCCCCC;
color: #000000;
padding: 10px;
margin-top: 0px;
}

.pagefooterblock a, .pagefooterblock a:visited {
color: #000000;
}

blockquote {
margin: 0px 10px 0px 10px;
padding: 10px;
color: #444444;
background-color: #999999;
border: 1px solid #CCCCCC;
text-align: left;
}

.sidebox #tags_sidebox {
display: list;
list-style: none;
text-align: left;
font-size: 10px;
color: #CCCCCC;
text-decoration: none;
}

.sidebox #tags_sidebox a{
display: block;
background: #FFFFFF;
text-align: left;
font-size: 10px;
text-decoration: none;
text-transform: none;
line-height: 140%;
}

.sidebox #tags_sidebox a:hover{
display: block;
background: #999999;
text-align: left;
font-size: 10px;
text-decoration: none;
text-transform: none;
}

/* HEADER */

.pageheaderblock {
text-align: left;
background-image: url(http://i208.photobucket.com/albums/bb74/babybeefy/TEMPLATE/darkblueheader01.jpg);
background-position: center;
background-repeat: no-repeat;
height: 200px;
padding: 10px;
}

.header-title {
display: none;
}

.header-subtitle {
display: none;
}

.header-icon {
display: none;
}

.header-menu {
padding-top: 50px;
background-color: transparent;
font-family: Tahoma;
font-size: 10px;
line-height: 20px;
text-transform: Uppercase;
}

.header-menu a, .header-menu a:visited {
display: block;
text-align: left;
padding: 0px 0px 0px 10px;
color: #000000;
text-decoration: none;
width: 120px;
}

.header-menu a:hover {
display: block;
background-color: #FFFFFF;
color: #000000;
width: 120px;
}

.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}

.header-menu li, #footer-menu li {
display: list;
list-style: none;
}

/* BODY */

.bodyblock {
padding: 10px;
}

.bodyheaderblock {
background-color: #CCCCCC;
padding: 10px 10px 10px 165px;
}

.bodynavblock {
background-color: #666666;
color: #000000;
margin-left: 0px;
padding: 10px;
overflow: auto;
}

.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}

.body-title {
font-family: Tahoma;
font-size: 13px;
font-variant: small-caps;
color: #000000;
text-align: left;
padding-left: 10px;
}

.body-midtitle {
font-family: Tahoma;
font-size: 10px;
color: #000000;
text-align: left;
padding-left: 10px;
}

/*ENTRIES*/
.entryHolder {
color: #999999;
background-color: #FFFFFF;
font-family: Tahoma;
font-size: 10px;
padding-left: 5px;
overflow: auto;
}

.entryUserinfo {
text-align: center;
margin: 0px;
background-color: #FFFFFF;
}

.entryUserinfo-usericon img {
margin-top: 10px;
border: 1px solid #CCCCCC;
padding: 5px;
}

.entryText {
padding: 10px;
}

.entryHeader {
background-color: #CCCCCC;
color: #000000;
font-family: Tahoma;
font-size: 10px;
padding: 5px;
}

.entryHeader a{
color: #000000;
}

.entryHeaderSubject {
font-weight: bold;
}

.entryHeaderDate a {
color : #000000;
text-decoration : none;
}

.entryHeaderDate a:hover {
color : #000000;
text-decoration : underline;
}

.entryMetadata {
padding: 10px;
}

.entryMetadata ul {
margin: 0px;
padding: 10px;
}

.entryMetadata li {
list-style: none;
display: inline;
padding: 10px;
}

.entryMetadata-label {
font-weight: bold;
padding: 10px;
}

.entryLinkbar {
font-family: Tahoma;
font-size: 10px;
color: #000000;
text-align: left;
padding: 10px;
}

.entryLinkbar ul {
margin: 0px;
padding: 10px;
}

.entryLinkbar li {
padding: 10px;
margin: 0px;
display: inline;
}

/*FOOTER*/

#footer-menu {
display: none;
}

#footer-menu a, .footer-menu a:visited {
color: #000000;
padding: 10px;
text-align: left;
}

/*SIDEBAR*/

.sidebar {
font-family: Tahoma;
font-size: 10px;
margin-right: 0px;
width: 150px;
padding-right: 5px;
}

.sidebox {
color: #000000;
background-color: #FFFFFF;
margin: none;
}

.sideboxTitle {
background-color: #999999;
color: #000000;
font-family: Tahoma;
font-size: 10px;
padding: 10px;
text-align: Left;
}

.sideboxContent {
text-align: left;
padding: 10px;
}

.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: left;
}

.sidebox #tags_sidebox {
display: list;
list-style: none;
text-align: left;
font-size: 0px;
color: #CCCCCC;
text-decoration: none;
}

.sidebox #systemlinks {
text-align: left;
}

.sidebox #latestmonth table{
text-align: left;
width: 100%;
margin-left: 0px;
margin-right: 0px
margin-top: 0px;
}

.listtitle {
font-weight: bold;
display: block;
}

.profile-label {
font-weight: bold;
}

/*OTHER PAGES*/

/* COMMENT PAGE */

.commentHolder {
color: #000000;
background-color: #f8f8f8;
border-top: 2px solid #ffffff;
font-family: ;
font-size: 12px;
margin: 4px 0px 4px 0px;
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;

background-color: #f8f8f8;
}
.commentUserinfo-usericon img {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #dddddd;
color: #000000;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #000000;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform {
background-color: #f8f8f8;
color: #000000;
padding-left: 10px;
}
#commenttext{
width:100%;
}

/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 300px;
border: 1px solid #dddddd;
}
.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #000000;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #000000;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 11px;
}
.day-count a {
text-decoration: none;
color: #000000;
}

/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}

.tagstable {
width: 500px;
}

I'm so sorry to trouble you all. Thanks in advance!