question

Jul 18, 2012 21:27

I'm working on a new layout and it looks good with me in IE & Chrome. However it doesn't appear right in firefox. Live preview at incheons. Screencaps of both IE and FF under the cut.


IE


FF


1. As you can see the date for the first entry is nex to the sidebar which is not suppose to happen.
2. I want the sidebar to shift to the left like you see in the IE screencap.
3. I want the sidebar and subcontent to be smaller then the header and have them in the middle of it. It works in IE and Chrome but not in FF
4. And lastly. I put a bg color in the subcontent. However in FF the entries still appear to be seperated.

/* Cleaned CSS: */
/* made by eunkyung
style -- Flexible Squares s2 */

BODY{
margin-left: ;
background-color: #cccccc;
background-image: url("http://i.imgur.com/h6tPe.png");
background-repeat:;
background-position: ;
background-attachment: fixed;
text-align: left;
font-size: 10pt;
color: #cccccc;
font-family: courier new;
}

body{margin: 0; }

a, a:link, a:visited {
font-family: "arial" Helvetica, sans-serif;
cursor: default;
color: #db3950;
font-weight: none;
text-transform: lowercase;
letter-spacing: 0px;
text-decoration: none;
}

a:hover{
font-family: "arial" Helvetica, sans-serif;
cursor: default;
color: #c5c5c5;
font-weight: none;
text-transform: lowercase;
text-decoration: none;
}

blockquote {
margin: 5px 5px;
padding: 4px;
color: #242424;
font-size: 8pt;
border-top: 2px solid #FF69B9;
background: #f1f1f1;
background-repeat: repeat;
text-align: justify;
}

#content {
width: 556px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

#maincontent {
margin: 0px 0px 0px 0px;
}

/* sidebar */

#sidebar {
width: 516px;
margin-left: 10px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
background: #ffffff;
color: #666666;
font-family: courier new;
font-size: 8pt;
line-height: 12pt;
text-align: justify;
float: left;
display: ;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #db3950;
text-decoration: none;
font-weight: bold;
}

div#sidebar a:hover {
text-decoration: none;
color: #666666;
}

.defaultuserpic {
text-align: center;
border-color: 10px solid #FEFEFE;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 3px 0px 3px;
}

.sbarbody2 {
padding: 8px 8px 8px 8px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
padding-right: 7px; padding-left: 7px;
border: px solid #ddd;
background: #f9f9f9;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
display: none;
}

.sbarcalendarposts {
padding-right: 7px; padding-left: 7px;
border: 0px solid #ddd;
background: #f9f9f9;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #73c8cb;
font-size: 8pt;
display: none;
}

ul.sbarlist {
margin-left: 0px;
list-style: none;
padding-left: 0px;
}

li.sbaritem {
margin: 2px 4px 2px 3px;
padding: 2px 2px 2px 13px;
list-style: none;
background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/greyarrow.gif) left center no-repeat;
border-bottom: 1px #f3f3f3 solid;
}

li.sbaritem:hover {
}

li.sbartitle {
list-style: none;
margin-top: 0px;
margin-left:0px;
text-align: left;
font-weight: normal;
padding: 5px 5px 5px 5px;
color: #000000;
font-family: "arial" Helvetica, sans-serif;
font-size: 12pt;
background: #f1f1f1;
border-bottom: 1px solid #cccccc;
border-top: 0px solid #f1f1f1;
text-transform: uppercase;
letter-spacing: 0px;
display: none;
}

ul.ljtaglist li {
padding: 0px;
margin: 5px;
list-style: decimal-leading-zero;
list-style-position: outside;
background: #ffffff;
}

.nav a {border-bottom: 0px solid #e6dcd6; border-top: 2px solid #e2e7e1; color: #9f8449; display: block; font-family: tahoma; font-size: 8pt; text-transform: lowercase; padding: 3px; line-height: 10px; background-color: #eeeeee;}
.nav a:hover {color: #9f8449; text-decoration: none; background-color: #f5f5f5;}
.nav br {display: none;}

/* header, footer */

#header {
background-image: url("http://i.imgur.com/m0BNr.png");
background-repeat:no-repeat;
color: #db3950;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-family: courier new;
font-size: 12pt;
font-weight: normal;
text-transform: uppercase;
border-bottom:0px solid #f1f1f1;
padding-top: 5px;
height: 56px;
}

#footer {
width: auto;
margin-top: -5px;
padding: 10px 0px 10px 10px;
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
background: #000;
font-size: 12pt;
color: #FFFFFF;
z-index: 100;
}

div#header a, div#header a:link, div#header a:visited{
font-family: courier new;
color:#666666;
text-transform: uppercase;
padding: 6px;
margin:0 0 0 0px;
}

div#footer a, div#footer a:link, div#footer a:visited {
font-family: courier new;
color: #666666;
font-size: 1em;
padding: 10px 10px 10px 10px;
text-transform: lowercase;
border-top: 0px solid #d3e2eb;
}

div#header a:hover {
font-family: courier new;
color:#b75176;
text-transform: uppercase;
}

div#footer a:hover {
font-family: courier new;
color: #b75176;
font-size: 1em;
padding: 10px 10px 10px 10px;
text-transform: lowercase;
}

ul.navheader{
padding: 6px 0;
margin: 0px;
background-position:left;
}

ul.navheader li {
display: inline;
margin: px 0px 0px;
list-style-type: none;
}

div#header li.view {
padding: 14px;
border-left: 0px solid #232323;
margin:0 -3px 0 0px;
}

#footer .viewing {
display:none;
}

ul.navfooter {
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}

.clearfoot {
display: none;
clear: both;
}

/* title, substitle */

.title {
text-align: left;
color: #FEFEFE;
font-family: courier new;
font-size: 15pt;
padding-left: 13px;
padding-top: 10px;
text-transform: uppercase;
letter-spacing: 2pt;
background: #db3950;
display: none;
}

.subtitle {
text-align: left;
color: #ffffff;
font-family: "courier new;
font-size: 8pt;
text-transform: lowercase;
letter-spacing: 2pt;
padding-left: 13px;
padding-bottom: 3px;
background: #db3950;
display: none;
}

/* tags page, tags */

.ljtaglist {
list-style-type: none;
padding: 0px;
margin: -1px 20px 0px 20px;
margin-left: 70px; width: 50%;
text-transform: uppercase;
text-align: left;
}

.ljtaglist li {
border-bottom: 1px solid #cccccc;
padding: 5px 2px 5px 20px;
color: #c5c5c5;
}

H2 {
margin: 30px 0px 10px 90px;
text-align: left;
padding: 2px 2px 2px 10px;
line-height: 12px;
font-weight: normal;
font-style: italic;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0px;
font-family: arial;
color: #888888;
background: url('') 0px 2px no-repeat;
}

ul.ljtaglist {
color: #bbb;
font-family: "Tahoma", Helvetica, sans-serif;
font-size: 7pt;
padding: 8px 8px 8px 12px;
border: 0px solid #FEFEFE;
background: #FEFEFE;
text-align: left;
margin-right: auto;margin-left: auto; padding: 35px;
}

.ljtags {
margin-top: 12px;
color: #cccccc;
font-size: 8pt;
font-weight: normal;
background: url(http://i42.tinypic.com/258md5u.png) 1px 1px no-repeat;
padding-left: 18px;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #b75176;
font-size: 8pt;
text-transform: lowercase;
font-weight: light;
}

/* subcontent, entry */
.subcontent {
width: 526px;
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
background-color: #ffffff;
}

.entry{
padding: 0px 20px 20px 10px;
border-left: 0px solid #ffffff;
border-right: solid #77cfe0 0px;
margin: 0px 0px 0px 0px;
color: #4F4F4F;
font-family: "verdana" Helvetica, sans-serif;
font-size: 9pt;
line-height: 12pt;
text-align: justify;
background: #ffffff;
}

.entry ul li {
padding-left: 10px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

/* userpic, userpic friends */

.userpic {
display: ;
position: relative;
float: right;
padding: 0px;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
z-index: 15;
background-color: #ffffff !important;
margin-left: 10px !important;
text-align: center;
font-family: courier new;
}

.userpicfriends {
display: ;
position: relative;
float: right;
background-color: #ffffff !important;
padding: 0px;
margin-right: 10px;
margin-left: 10px !important;
margin-top: 0px;
z-index: 15;
border: 0px solid #946063;
text-align: center;
font-family: courier new;
font-size: 8pt;
z-index: 15;
}

.userpic img, .userpicfriends img, .defaultuserpic img{
background: #f7d411;
padding:0px; border-width: 0px;
border-color: #cc9999;
border-style: solid;
width: 75px;
height: 75px;}

.userpic font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends {font-size: 3; align: right;}

.userpicfriends a{ display: yes;}

.userpicfriends br {
display: block;
height: 0;
}

/* date, subject, comments, currents */

.date{
margin-left: 0px;
margin-top: 0px;
text-align: left;
padding-left: 10px;
color: #bababa;
font-family: "verdana" Helvetica, sans-serif;
font-size: 8pt;
text-transform: lowercase;
background-color: #ffffff;
}

.subject {
padding-left: 10px;
margin-bottom:0px;
padding-top:0px;
font-weight: normal;
padding-bottom: 2px;
color: #787878;
font-family: "georgia" Helvetica, sans-serif;
font-size: 11pt;
border-right: solid #77cfe0 0px;
text-transform: lowercase;
letter-spacing: 1px;
}

.subject a, .subject a:link, .subject a:visited {
font-family: "georgia" Helvetica, sans-serif;
color: #b75176;
text-transform: lowercase;
}

.subject a:hover {
color: #999;
}

.datesubject {
margin-top: 10px;
padding-left: 0px;
background-color: #ffffff;

}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #777777;
font-size: 8pt;
text-transform: lowercase;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #777777;
font-size: 8pt;
text-transform: lowercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #b75176;
font-size: 8pt;
text-transform: uppercase;
font-weight: light;
}

.currentlocation a:hover, .ljtags a:hover {
color: #999;
font-size: 8pt;
font-weight: light;
text-transform: lowercase;
}

.currentlocation {
height: 16px;
background: url('http://img5.imageshack.us/img5/3871/045t.png') 4px 2px no-repeat;
padding-left: 18px;
}

.currentmood {
background: url('http://img25.imageshack.us/img25/9614/035a.png') 4px 2px no-repeat;
padding-left: 18px;
padding-bottom: 2px;
}

.currentmusic {
height: 18px;
background: url('http://img5.imageshack.us/img5/7127/056m.png') 4px 2px no-repeat;
padding-left: 18px;
}

.currentgroups {
padding-left: 20px;
height: 18px;
background: url('http://i43.tinypic.com/x9kir.jpg') 1px 1px no-repeat;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
font-weight: none;
padding: 8px;
position: relative;
top: 0px;
border-bottom: solid #f3f3f3 1px;
background-image: url(' ');
background-repeat: repeat;
text-transform:lowercase;
letter-spacing: 0px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #666666;
text-transform: uppercase;
}

div.comments a:hover {
color: #bbbbbb;
text-transform: uppercase;
}

/* other */

.clear {
display: none;
height: 0px;
}

/* header */

.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}

.separator {
background-color: #f1f1f1;
background-image: url('');
background-repeat: repeat-x;
height: 0px;
}

.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
color: #c9c9c9;
}

.userpiccomment {
position: relative;
top: -10px;
padding: 4px;
margin: 0px 10px -20px 0px;
z-index: 15;
float: left;
width: 75px;
height: 75px;}
}

.box {
clear: left;
color: #666666;
}

input, textarea {
background-color: #ffffff;
padding: 3px;
font-size: 9pt;
font-family: courier new;
color: #666666;
border: 1px solid #000000;
}

textarea.textbox {
width: 100% !important;
border: 1px solid #000000;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: courier new;
font-size: 9pt;
line-height: 125%;
background-color: #ffffff;
color: #666666;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 9pt;
font-family: courier new;
color: #666666;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
padding: 10px;
color: #ffffff;
background-color: #ffffff;
}

/* tiny icons */

/* Generated by Malionette's Tiny Icon Generator
http://malionette.net/generator/tinylite.html */

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/2aJvs.png) no-repeat !important; padding: 16px 0 0 18px !important; }
span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/vLyZg.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/K9JN5.png) no-repeat !important; padding: 16px 0 0 16px !important; }

header and footer, entries

Previous post Next post
Up