Layout problems switching from IE7 to Firefox

Nov 13, 2009 12:57

I've just changed my layout and edited it to my needs... but while it looks good to me in IE7, i asked my friends who use Firefox to check it and it looks all odd to them (like the userpics cover part of the entries, the subject line is in the middle of the entry, etc).

Is there a way to fix it? I'm using a Paid Account.

My edited layout is here: rory_tutorgirl
The original one is located here, the rainbow one.



/*------------------------------

choke on the smoke in rainbow ((flexible squares; milou veronica))

-------------------------------*/
body { background: url() #eeeeee repeat fixed 0 0; text-align: center; color: #ffffff; font-family: "Trebuchet MS", Geneva, sans-serif; font-size: 11px; margin: 0; padding: 0px 0 0;}
.headerimage {position: relative; background: url(); width: 800px; height: 0px; background-repeat: no-repeat;margin-left: auto;margin-right: auto;margin-bottom: 0px; }
#content{ color: #555555; min-width: 800px; max-width:950px;margin: 0 auto 0 0; border-width: 0px; padding: 10px 10px 0 0;}
#maincontent { padding: 0;clear:right;margin-top: 6px;text-align: left;margin-left: 215px; margin-right: -50px;}
#sidebar { padding:10px; margin: 6px 0 0; margin-left: 215px; text-align: left; color: #999999; font-size: 7pt; background-color: #FFFFFF;min-
}

/*-------------------HEADER-----------------------*/
#header {line-height:.8;margin: 5px 1px 0px; text-align: right; text-transform: uppercase; color: #aaa; padding:0px;}

div#header a, div#header a:link, div#header a:visited{ margin: 0px;}
div#header li.view { }
div#header li.view:hover, ul.navheader li:hover { background-color:#}
ul.navheader{ padding: 0 7px 0 0;font-size:5em;letter-spacing:-.15em; margin:0; overflow: hidden;width:205px;float:left}
ul.navheader li {padding: 0px; margin: 0px; list-style-type: none; border-bottom:0px solid #222222; border-right:0px solid #FFFFFF;display: block;}

.title {padding: 0px 0 0; letter-spacing: -4px;line-height:.9;font-size: 3em;text-transform: lowercase; color:#29C1DF}
.subtitle{text-transform: lowercase;color:#29C1DF;line-height:.9; font-size: .8em;color:#aaa }

/*-------------------ENTRIES-----------------------*/
.subcontent {min-height: 140px; margin-right: 0px; padding-top: 0px; }
.date { text-transform: uppercase; color: #999999; font-size: 8pt; }
.subject { background-color: transparent ; letter-spacing: -1px; font-size: 14pt; text-transform: lowercase; line-height: 1; border-bottom: 1px dashed #FFCB2C; }
.subject a, .subject a:link, .subject a:visited {text-decoration: bold;}
.datesubject {padding: 10px 5px 15px 10px; text-align: right;background-color: #FFFFFF; margin-right:140px}
.entry { margin: -100px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; line-height: 1.56; border-width: 0px;background-color: #FFFFFF;margin-right:0px; width: 705px;}
.entry_text { font-size: 11px; padding: 10px 20px; margin-bottom: 20px; margin-right: 40px;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/*---------------------------USERPICS----------------------------*/
.userpic { position: relative; float: right; padding: 5px; background-color: #eeeeee; margin: 0px 0px 10px 10px ; z-index: 15; border: 17px solid #BBDF29;}
.userpicfriends { border: 0px solid #eeeeee; position: relative; background-color: #eeeeee !important; float: right; padding: 0 0 3px; margin: 0px 0px 10px 10px; text-align: right; z-index: 15; font-size: 8pt;}
.userpicfriends img {border: 0px; padding: 1px; border:17px solid #BBDF29;}
.userpicfriends a font {color: #bbbbbb;}
/*--------------------------COMMENT BAR-------------------------*/
.comments {background-color: #eeeeee; color: #eeeeee; word-spacing:-5px; font-size: 8pt; text-align: right; padding: 5px 0px 0px 5px; position: relative; top: 0px; text-transform: ; margin-top: 20px;}

div.comments a, div.comments a:visited, div.comments a:link {word-spacing:1px; padding: 6px; background-color:#f7f7f7; border-width: 0 1px 1px;border-style: solid;border-color: #f7f7f7;}
div.comments a:hover {background-color:#FFFFFF;border-width: 1px;border-style: solid;border-color: #FFFFFF ;}
.separator{height: 25px;}

/*-------------------------CURRENTS AND TAGS-------------------------------------*/
.ljtags {text-align: left; padding: 0 8px; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #444; font-weight: bold;}
.ljtags:hover {border-color: #520204;} div.ljtags a {font-weight: normal; }

.currents {text-align: left; margin:0px 20px; padding: 8px; text-transform: lowercase; font-size: 7pt; color: #999999; background-color: #f7f7f7; border: 1px dashed #BBDF29; max-width: 500px;}
.currents:hover { border-color: #;}
.currents strong {text-decoration: none; color: #29C1DF;}
.currentlocation { } .currentmood { } .currentgroups { } .currentmusic { }

/*----------------------TAG PAGE------------------------------*/
h2 { background-color: #FFFFFF;padding: 10px 10px 10px 30px;letter-spacing: 0px; font-size: 13pt; text-transform: uppercase; line-height: 100%; color: #ffffff; font-weight: normal; margin: 0; }

.ljtaglist { text-align: left; margin: 0; background-color: #FFFFFF; padding: 3px 15px 15px 35px; font-size:10px; list-style: circle; } .ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px dotted #f4f4f4; }

/*---------------------COMMENT PAGE-----------------------------*/
.box { text-align: left; margin-bottom:1px; padding:0px; clear: left;}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; }
.userpiccomment { position: relative; padding: 8px; border: 1px solid #ececec; background-color: #FFFFFF; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
textarea.textbox {width: 100% !important;}

.reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.75;}
.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 20px;}
.commentbox { border-bottom: 0px solid #eeeeee; background-color: #FFFFFF; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;}
.commentbox:hover, .commentboxpartial:hover {border-color: #e6e6e6;}
.commentboxpartial { border-bottom: 0px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px;}
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;}

.skiplinks {text-align: right; margin-bottom: 6px; padding: 10px; font-size: 7pt; letter-spacing: 1px; color: #dddddd;background-color: #FFFFFF}

/*------------------------SIDEBAR-----------------------------------------*/
.defaultuserpic { margin: 0; padding:0px; text-align:center;float:right}
.defaultuserpic img {padding: 1px; border: 13px solid #FF6F90; margin-top: 0px; width: 60px; height: 60px; }

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

.sbarbody2 { padding: 0px 5px 7px 5px;}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}
li.sbaritem{ padding: 0px 4px; border-right: 0px solid #dddddd; margin:2px; display:inline;} li.sbaritem:hover {border-bottom: 4px solid #F7872E;}
li.sbartitle{ text-transform: lowercase; padding: 4px ; margin: 3px 0; border-bottom: 1px solid #eeeeee; color: #777777;}

#sidebar_linklist {text-transform: lowercase} #sidebar_summary, #sidebar_tags, #sidebar_calendar, li.sbartitle {display:none;}

/*---------------------FOOTER----------------------------------*/
#footer {padding:12px 0;text-align:right;margin: 0px;text-transform: lowercase; font-size: 7pt; letter-spacing: 0px; z-index: 100;float:left;width:200px;position:left;bottom:0}

ul.navfooter{padding: 0px; margin: 0px;}
ul.navfooter li {list-style: none; margin: 0 5px 0px 5px; display:inline; }

div#footer li.viewing { display:none; padding: 7px; margin: 2px; background-color: #f7f7f7; }
div#footer a, div#footer a:link, div#footer a:visited { color: #aaaaaa; background-color: #f7f7f7; padding: 10px; margin: 2px;}
div#footer a:hover {color: #989898; border: 1px dashed #29C1DF; }

.clearfoot {float:left;}

/*-----------------------ARCHIVE PAGE--------------------------------*/
ul.year { background-color: #FFFFFF; margin: 0px; font-family: Verdana, Geneva, sans-serif;text-align: center; padding: 20px;}
ul.year li {display: inline;}
table.yeartable {margin-top: 0; background-color: #FFFFFF; margin-left: auto; margin-right: auto; padding: 30px; width: 100%;}

table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #eeeeee;}
table.yeartable td.yearday { background-color: #f4f4f4; text-align: center;}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}

/*-----------------------ICONS BY PINVOKE--------------------------------*/

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i42.tinypic.com/2vx4l1c.png);}
img[src*="icon_private.gif"]{background-image: url(http://i42.tinypic.com/2vayr08.png);}
img[src*="icon_groups.gif"]{background-image: url(http://i39.tinypic.com/2dkde1s.png);}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i39.tinypic.com/wsra1k.png) !important;}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i43.tinypic.com/fmpdax.png) !important;}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i39.tinypic.com/2hehb1j.png) !important;}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i42.tinypic.com/wl24ht.png) !important;}

img[src*="btn_del.gif"]{background-image: url(http://i44.tinypic.com/2i957rd.png);}
img[src*="btn_scr.gif"] {background-image: url(http://i42.tinypic.com/2s1abgk.png);}
img[src*="btn_unscr.gif"] {background-image: url(http://i40.tinypic.com/2ef4xgp.png);}
img[src*="btn_freeze.gif"] {background-image: url(http://i39.tinypic.com/j982gg.png);}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i41.tinypic.com/255pf1v.png);}
img[src*="btn_track.gif"] {background-image: url(http://i43.tinypic.com/2qvut76.png);}
img[src*="btn_tracking.gif"] {background-image: url(http://i43.tinypic.com/1zwj9cn.png);}
img[src*="btn_tracking_thread.gif"] {background-image: url(http://i39.tinypic.com/hreo9y.png);}
img[src*="anonymous.gif"] {background-image: url(http://i44.tinypic.com/f4ej9g.png);}
img[src*="openid-profile.gif"] {background-image: url(http://i42.tinypic.com/2nuk515.png);}
img[src*="userinfo.gif"] {background-image: url(http://i41.tinypic.com/24d39lf.png);}
img[src*="talk/none.gif"] {background-image: url(http://i44.tinypic.com/2qvgzt5.png);}
img[src*="help.gif"] {background-image: url(http://i42.tinypic.com/vo24h3.png);}
img[src*="pencil.gif"],img[src*="btn_edit.gif"] {background-image: url(http://i44.tinypic.com/6t3hjp.png);}

.ljuser img {width: 0; height: 0; background: transparent url(http://i41.tinypic.com/24d39lf.png) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: text-bottom !important;}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i41.tinypic.com/24d39lf.png) no-repeat center left !important; padding: 16px 12px 0 2px !important; }
.ljuser img[src*="userinfo.gif"]:hover {background-image: url(http://i40.tinypic.com/nno9l3.png) !Important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i39.tinypic.com/2yyedue.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important; }
/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { color: #888888 !important; border: 0px solid #ffffff; background-color: transparent !important; padding: 0px; width: 300px;}
div.ContextualPopup .Userpic { padding: 12px; margin-left: 0px; border: 1px solid #ececec; background-color: #FFFFFF;}
div.ContextualPopup .Content { padding: 5px; background-color: #FFFFFF; border: 1px solid #ececec; margin: 4px 80px 4px 4px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #555555 !important;}
div.ContextualPopup .Relation { text-transform: lowercase; font-size: 9pt; letter-spacing: 0px;}

/*--------------- MISC-------------- */
table#lj_controlstrip td {background-color: #ececec; background-image: url(); color: #e5e5e5;border: solid 1px #e5e5e5; border-left: none; }
#lj_controlstrip a { color: #999999; } #lj_controlstrip_statustext { color: #666666; }

.Note .Inner, form#postform { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px}

b, u { color: #29C1DF;}
i, s { color: #BBDF29; font-family: Georgia, Times New Roman, Book Antiqua, serif;}
p, td {font-size: 11px;}

blockquote { padding:15px; margin: 10px;background: #f4f4f4 url() repeat scroll 0 0; color: #777777; }
code {display:block; padding:5px; border:1px dashed #dddddd; font-size: 12px;}
.appwidget-qotd table tr td div {border:1px solid #eeeeee !Important;padding:8px 15px !Important}

kbd, pre, tt {font-family: monospace;} form#qrform table {border-width: 0px !important; background-color: #; padding-right: 6px;}
input, textarea { font-family: "Trebuchet MS", Geneva, sans-serif; font-size: 11px; background: #f7f7f7 url() repeat scroll 0 0; border: 1px solid #eeeeee;color: #666666;}

/*-------------------COLORS-----------------------*/
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #F7C52E;
text-decoration: none;}
.ljuser a b {font-weight:normal;font-variant:small-caps}
a:hover, .subject a:hover, div.comments a, div#sidebar a:hover, .datesubjectcomment a:hover,.ljuser a b:hover {color: #F7872E;}
div#header a {color: #8FBFBA;} div#header a:hover {color: #FFFFFF;} a img {border:none}
.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject, h2, ul.year {color: #29C1DF;}

div#header a, div#header a:link, div#header a:visited{color:#BBDF29;} div#header a:hover{color:#F7C52E;}
div#header li.view {color:#F7C52E;} div#header li.view:hover {color:#FF6F90;}

div#header a[href*="/calendar"]{color: #BBDF29 !Important;} div#header a:hover[href*="/calendar"]{color: #F7872E !Important;}
div#header a[href*="/friends"]{color: #FF6F90 !Important;}div#header a:hover[href*="/friends"]{color: #29C1DF !Important;}
div#header a[href*="/profile"]{color: #29C1DF !Important;}div#header a:hover[href*="/profile"]{color: #F7872E !Important;}
body.lj-view-entry div#header a[href*="livejournal.com/"] {color:#F7C52E;} body.lj-view-entry div#header a:hover[href*=".livejournal.com/"] {color:#29C1DF;}

.headerimage {
position: relative;
margin-left: 150px;
margin-right: auto;
width: 790px;
height: 310px;
background-position: center;
background-repeat: no-repeat;
background-image: url("http://www.rory21.net/lj/LJheader.jpg");
}

I basically had to change the width of the entries (since i use my journal to post graphics and they came out all misplaced with the original size) and then had to consequently move the userpic a bit more on the right and adjust the top margin of the entry cause there was a huge gap in between the subejct/date and the actual entry.

Thanks for any help!

EDITED:

I tried changing
.entry{ margin: -100px 0px 0px 0px;
and decreasing it to -25px
I think that was definitely the problem cause now i got it to look okay in Firefox.

IE7:

Firefox:

(Yes, if you're reading the entry i'm aware i mispelled 'leave' with 'live', i took the screencaps before correcting that lol)

Point is though that i don't like the gap that appears in IE! =/ I'd like to get the same exact effect it has now on Firefox... but without causing it then to look shitty on Firefox considering people with different browsers visit my LJ. Any way to accomplish it?

lj and browser issues

Previous post Next post
Up