Firefox Problem opn LJ layout, please ? someone know how to fix it ? Options

[valuxofxpain]

Hi, sorry, i'm new and already asking things u.u"

I'm a very active LJ layout maker, I have a graphic shop account at http://valuexofxpain.livejournal.com, and I've never had any problems until now.

here is the problematic layout : http://kai-teste.livejournal.com/

I'm testing some new kind of layouts, almost re-writting all the LJ usual layouts, making the LJ look like a complete website, ignoring the pre-made themes configurations.

so far, The only suppurted browsers are IE 7.0 and Opera. Firefox see it with mistakes on the navigation bar. It got placed wrong.

I'm still working on it, if anyyone knows how to fix it for BOTH browser, please tell me. The point is, If I fix the position of the div on FF, then it get screwed on IE. Just don't know what to do u.u"

Someone have any suggestions ?

the problem probably is due to the relative left negative position.

ps. you can find the code on the link, but to help :

the code i'm using :

/* PAGE */


/* For this layout to work you must:
1. set you journal on smooth sailing default layout,
2.deactivate the 'use layout's stylesheet' and 'Use layout's stylesheet(s) when including custom external stylesheet'
3.activate the customized css, pasting this code there */

/* ctrl+f to localize the HEADER_IMAGE, NAV_BG and BODY_BG and change for the link were you put your image */
body {
font-family:Myriad Web Pro;
font-size: 9px;
line-height: 16px;
letter-spacing: 0pt;
margin-top: 0px;
background-color: #000000;
color: #410b12;
align: center;
background-image:url();
background-repeat: repeat;
background-position: top;
overflow:none;
height: 600px;
}


::-moz-selection { background-color: #000000; color: #3d3d3d; }

a, a:link, a:visited {
color: #677c4d;
text-decoration: none;
}

a:hover {
color: #000000;
background-color: #677c4d;

}

.pageblock{
width:780px;
background-image: url('http://i225.photobucket.com/albums/dd171/waru_girl/kaoru1/body_bg.jpg');
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
height:600px;
}
.pagefooterblock {
display:none;
background-color: transparent;
color:#682350;
padding-top:5px;
padding-bottom:5px;
text-align: center;
border-top:0px solid #3d3d3d;
width: 780px;
background-image: url('http://i225.photobucket.com/albums/dd171/waru_girl/kaoru1/body_bg.jpg');
background-repeat: repeat-y;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #dad7d7;
}




/* HEADER */

.pageheaderblock {
text-align: center;
background-color:transparent;
}
.header-title {
font-size: 0px;
background-color: transparent;
background-image: url(http://i225.photobucket.com/albums/dd171/waru_girl/try/bg.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top:0px;
height: 600px;
width: 780px;
}
.header-subtitle {
display:none;
}
.header-icon {
display:none;
}

.header-menu {
background-color: transparent;
font-family:Myriad Web Pro;
font-size: 14px;
line-height:30px;
text-align: center;
border-bottom:0px dashed #5c5c5c;
width: 187px;
position:relative;
z-index:50;
top:-245px;
left:-267px;
overflow: auto;
height: 187px;
}

.header-menu a, .header-menu a:visited {
text-align: center;
color: #000000;

}
.header-menu a:hover {
color: #000000;

}
.header-menu ul {
margin: 0;
padding: 0;
display: block;
list-style-type: none
}

.header-menu li{
margin: 0 3px 0 3px;
display: block;
list-style-type: none
}

.header-menu A, visited {
color: #000000;
background: #3e5126;
text-align: center;
padding: 1px 3px 1px 3px;
text-decoration: none;
border: #000000 solid 1px;
}

.header-menu A:hover {
color: #677c4d;
background: #000000;
border: #3e5126 solid 1px;
text-decoration: none;
}



/* BODY */
.bodyblock {
padding:0px;
width:369px;
height:292px;
position:relative;
z-index:300;
top:-654px;
left:352px;
OVERFLOW: scroll;
scrollbar-arrow-color:#000000;
scrollbar-slider-color: #29361a;
scrollbar-highlight-color:#29361a;
scrollbar-shadow-color:#3e5126;
scrollbar-3dlight-color: #3e5126;
scrollbar-face-color:#3e5126;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
}

.bodyheaderblock {
display: none;
}
.bodynavblock {
text-align: left;
list-style:none;
}

.bodynavblock a, .bodynavblock a:visited {
color: #682350;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}



/*ENTRIES*/

.entryHolder {
color:#ffffff;
background-color: transparent;
font-family:arial ;
font-size: 12px;
margin: 0px 0px 5px 0px;
padding-top: 3px;
padding-left: 10px;
padding-bottom: 20px;
padding-left:5px;
width:339px;

}
.entryUserinfo {
text-align: center;
margin: 5px;
background-color: #535151;
background-image:url();
background-repeat: no-repeat;
background-position: top left;
padding-bottom: 1px;

}
.entryUserinfo-usericon img {
background-image:url();
border: 0px;
}
.entryText {
padding: 6px;
}

.entryHeader {
color:#677c4d;
font-family:Myriad Web Pro;
font-size: 15px;
font-weight: none;
text-decoration: none;
background-color: transparent;
padding-top: 5px;
padding-bottom:5px;

}

.entryHeader a{
color: #677c4d;
}
.entryHeaderSubject {
font-weight: none;
font-size: 15px;
letter-spacing: 3pt;
text-decoration : none;
}
.entryHeaderDate {
color: #677c4d;
text-decoration : none;
}

.entryHeaderDate a {
color: #677c4d;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #677c4d;
text-decoration : none;
}
.entryMetadata {
padding-left: 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata-label {
color: #000000;
font-weight: none;
padding-right: 4px;
}
.entryLinkbar {
font-family:Myriad Web Pro ;
font-size: 11px;
color: #535151;
text-align: right;
padding: 4px 0px 4px 0px;
border-bottom: 1px solid #000000;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}

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




/*FOOTER*/

#footer-menu {
display:none;
font-size: 10px;
background-color:tranparent;
padding-left:5px;
}
#footer-menu a, .footer-menu a:visited {
color: #677c4d;
background-color:tranparent;
padding: 0px;
text-align: right;
}
#footer-menu a:hover {
background-color:#677c4d;
color: #000000;
padding: 0px;
text-align: right;
}



/*SIDEBAR*/

.sidebar {
display:none;
width: 171px;
padding: 5px;
color: #000000;
background-color:transparent;
font-family:Tahoma;
font-size: 7pt;
text-align:justify;
top:-200px;
left:37px;

height:187px;

}

.sidebox {
padding: 4px;
background-color: transparent;
margin: 0px 0px 10px 0px;
}

.sideboxTitle {
text-align: center;
list-style: none;
color: #2c2b2b;
margin-bottom: 5px;
font-family: Myriad Web Pro;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-image:url();
background-repeat: no-repeat;
background-position: top left;
border-bottom: 1px solid #2c2b2b;
}
.sideboxContent {
text-align: center;
font-family:Myriad Web Pro;
font-size: 10px;
padding: 2px 4px 2px 4px;
color: #000000;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #tags_sidebox {
text-align: right;
font-size : 10px;
width:100%
font-weight:bold;
}
.sidebox #systemlinks {
text-align: center;
font-size : 10px;
width:100%
}
.sidebox #latestmonth table{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
color: #000000;
}
.listtitle {
font-weight: bold;
text-align: right;
font-size : 10px;
text-align: center;
display: block;
width: 100%;
}
.profile-label {
font-weight: bold;
}
.sidebox #systemlinks a{
padding-top:5px;
padding-right: 5px;
list-style: none;
text-align: center;
display: block;
}

.sidebox #systemlinks hover{
background-color: #535151;
}


/*ARCHIVE PAGE*/
.yearlinks{
color: #535151;
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;

}
.month {
width: 450px;
border: 1px solid #535151;
margin: 8px 8px 8px 40px;
}



.daysubjects {
color: #535151;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px dotted #fba3a6;
background: transparent;
color: #fba3a6;
}
.day-blank {
border: 1px solid #535151;
}
.day {
border: 1px solid #535151;
}
.day-date {
border-right: 1px solid #535151;
border-bottom: 1px solid #535151;
color: #000000;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 14px;
}
.day-count a {
text-decoration: none;
color: #535151;
}




/*TAGS PAGE*/

.tagstable, .tagstable td {
border: 1px solid #535151;
}
.tagstable { width: 450px;
}



/* COMMENT PAGE */

.commentHolder {
color: #000000;
background-color: transparent;
border-top: 1px dashed #535151;
font-family: ;
font-size: 12px;
margin: 4px 0px 4px 0px;
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: transparent;
}
.commentUserinfo-usericon img {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: transparent;
color: #000000;
font-family: Myriad Web Pro;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #000000;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: transparent;
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;
}
#commenttext{
width:100%;
}

/* FORM */

.replyform {
background-color: #000000;
text-align: left;
margin: 5px 10px 5px 7px;
color: #535151;
line-height: 16px;
border: 1px solid #535151;
}

.textbox {
margin-top: 5px;
margin-bottom: 5px;
}

.replyform textarea {
width: 450px;
}

input {
font-family:Myriad Web Pro;
font-size: 10pt;
color: #535151;
background-color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
border: 1px solid #535151;
font-size: small;
margin: 0;
}

#SearchType {
margin-bottom: 5px;
}

[libertie]

Sidebar code..

CODE

.header-menu {
background-color: transparent;
font-family:Myriad Web Pro;
font-size: 14px;
line-height:30px;
text-align: center;
border-bottom:0px dashed #5c5c5c;
width: 187px;
z-index:50;
overflow: auto;
height: 187px;
position: absolute;
left: 50%;
margin-left: -370px;
top: 355px;
}

This fixes the positioning of the sidebar for both Firefox and IE, but moves the entries, so you would need to fix them as well:

CODE

.bodyblock {
padding:0px;
width:369px;
height:292px;
position: absolute;
z-index:300;
top: 133px;
left:50%;
margin-left: -38px;
OVERFLOW: scroll;
scrollbar-arrow-color:#000000;
scrollbar-slider-color: #29361a;
scrollbar-highlight-color:#29361a;
scrollbar-shadow-color:#3e5126;
scrollbar-3dlight-color: #3e5126;
scrollbar-face-color:#3e5126;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
}

The main reason for the discrepancy is that the background image pushes everything down - if you use absolute positioning, you don't have to use as many negative numbers.

[valuxofxpain]

Sidebar code..

CODE

.header-menu {
background-color: transparent;
font-family:Myriad Web Pro;
font-size: 14px;
line-height:30px;
text-align: center;
border-bottom:0px dashed #5c5c5c;
width: 187px;
z-index:50;
overflow: auto;
height: 187px;
position: absolute;
left: 50%;
margin-left: -370px;
top: 355px;
}

This fixes the positioning of the sidebar for both Firefox and IE, but moves the entries, so you would need to fix them as well:

CODE

.bodyblock {
padding:0px;
width:369px;
height:292px;
position: absolute;
z-index:300;
top: 133px;
left:50%;
margin-left: -38px;
OVERFLOW: scroll;
scrollbar-arrow-color:#000000;
scrollbar-slider-color: #29361a;
scrollbar-highlight-color:#29361a;
scrollbar-shadow-color:#3e5126;
scrollbar-3dlight-color: #3e5126;
scrollbar-face-color:#3e5126;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
}

The main reason for the discrepancy is that the background image pushes everything down - if you use absolute positioning, you don't have to use as many negative numbers.

I love you so much that I don't have words to describe.
Seriously, thank you so much. I'll keep that in mind.

I've always thought that once you use absolute, it get's difficult to set thing to be always centered for whoever opens the page ;)