Problems with layout in IE 7 [SOLVED]

Nov 29, 2008 23:57

EDIT: This issue has been solved. Mad props to marahmarie for helping me work through this mess!

Hello everyone. I have my journal designed just the way I want it. It looks fine in Firefox (which is what I use) but the header (I think) is shifting one pixel in IE7, so it doesn't line up with my background. Everything is one pixel off. Does anyone know what is causing this? When I fix it in IE, then it's one pixel off in Firefox, vice versa. The code is one I got from thefulcrum but I have heavily modified it, so there is no telling what I've done wrong. CSS code is under the cut.



/* Template: (#25) Your Biggest Flan v. Extra Wide */
/* Date: March 4, 2007 */
/* S2 Style: Mixit */
/* Available at http://community.livejournal.com/thefulcrum/ */
/* Made by Liz a.k.a. grrliz.livejournal.com */

/* -------------------------------------------------------- */
/* ---------- ADD YOUR HEADER GRAPHIC BELOW --------------- */
/* -------------------------------------------------------- */

#header {position: relative; margin-bottom: -300px; margin-left: 0px; width: 1094px; height: 600px; background: url(http://pics.livejournal.com/crucibelle/pic/00054x7f) top center;}

/*
- make sure that your height is the height of your graphic plus 40px
- e.g. if your graphic is 350px, your height should be 390px
*/

/* -------------------------------------------------------- */
/* ---------- ADD YOUR HEADER GRAPHIC ABOVE --------------- */
/* -------------------------------------------------------- */

html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */ }

body {
margin: 0px;
padding: 0px;
margin-top: -30px;
background: #fcfcfa url(http://pics.livejournal.com/crucibelle/pic/000529qa) fixed center top repeat-y;
color: #3d4d4d;
font-family: tahoma, verdana, arial, sans-serif;
font-size: 62.5%;
text-align: center;

}

a, a:link, a:visited, a:active {color: #3d998a; text-decoration: none;}
a:hover {color: #996b2e; text-decoration: none;}

p {margin-top: 0.8em; margin-bottom: 0.8em;}

blockquote {margin: 0.8em 3em; padding: 1.63em; left-border: 5px solid #f07e0b; background: #272727;}

input, textarea, select {}

/* ----------------------------------------- */
/* ---------- PAGE STRUCTURE --------------- */
/* ----------------------------------------- */

/* -- don't touch the stuff below -- */

#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {position: static;}
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */

/* -- don't touch the stuff above -- */

#container {position: relative; margin: 0px auto; padding: 0px; font-size: 1.2em; line-height: 1.8em; text-align: left; overflow: hidden;}
#container-inner {min-height: 100%; text-align: left;}

#page {width: 989px !important; margin: 0px auto; padding: 0px; border: 0px solid #bbbbbb; background: transparent;}

#header-inner {margin: 0px auto;}

#content {text-align: left;}

#alpha {width: 730px;}
.layout-tw #alpha {float: right;}

#alpha-inner {margin: 0px 42px 0 0px;}

#beta {width: 230px;}
.layout-wt #beta-inner {padding: 1.8em 20px 20px 0px}
.layout-tw #beta-inner {padding: 1.8em 0px 20px 20px}

.lj-view-archive #alpha-inner,
.lj-view-month #alpha-inner,
.lj-view-tags #alpha-inner {padding-top: 20px; padding-bottom: 20px;}

/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

#header-content {overflow: hidden; text-transform: uppercase; text-align: center; display: none;}

#header-text ul.nav {position: absolute; bottom: 277px; left: 50px; width: 100%; padding: 0px; height: 12px; line-height: 12px; border-top: 0px dashed #bbbbbb; border-bottom: 0px dashed #bbbbbb; background: transparent; text-transform: uppercase; letter-spacing: 2px; z-index: 1; }
#header-text ul.nav li {margin: 0px; padding: 0 0.4em; display: inline;}
#header-text ul.nav li.item {border: 0px;}
#header-text ul.nav a {color: #3d998a; font-size: .8em; text-decoration: none;}
#header-text ul.nav a:hover {color: #333333;}

#header-name {display: none; margin: 0px auto; padding: 1.2em 0; font-size: 2em; letter-spacing: 0.1em;}
#header-name a {color: #f07e0b; text-decoration: none;}
#header-name a:hover {color: #333333;}
#header-description {display: none; margin: 0px auto; }

/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

/* previous and next links */
.stream-header {display: none; padding: 10px 20px; text-align: center;}
.stream-footer {padding: 0px; text-align: center;}

/* entry container */
.asset {margin: 0px; padding: 0px 0px 13px 0px; border-bottom: 0px solid #272727; background: url(http://pics.livejournal.com/crucibelle/pic/000566kw) bottom center no-repeat;}
.asset-inner {padding: 0 0 1.8em 0; }

.asset-header {padding: 1.8em 0 0.9em 0;}
.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {margin: 0px; padding: 0em 0; font-size: 1.5em; font-weight: normal; font-family: Georgia;}
h2.page-header2 a, .lj-view-tags h2 {color: #3d4d4d; text-decoration: none;}
h2.page-header2 a:hover {color: #996b2e;}

abbr.datetime {
margin: 0px; padding: 0px;
list-style-type: none;
color: #b3a16b;
font-size: .9em;
text-transform: uppercase;

}

/* entry body, meta, tags */
.asset-content {margin-bottom: 0.9em; padding-bottom: 0.9em; }

/* entry text */
.asset-body {padding: 0.9em 0;}

.asset-body a {color: #3d998a; font-weight: bold; border-bottom: 0px dashed #bbbbbb; text-decoration: none;}
.asset-body a:hover {color: #996b2e;}
.asset-body dt {border-bottom: 0px dashed #bbbbbb; font-weight: bold;}
.asset-body dd {margin-left: 3.6em; padding: 10px; background: #e6e6e6; border: 0px dashed #bbbbbb; border-top: 0px; }

/* date and time */
div.asset-header ul {margin: 0px !important; padding: 0px !important; text-align: left !important;}
div.asset-header li.item {padding: 0px;}

.ljuser {display: inline !important;}

/* userpic */
.user-icon {float: right; margin-left: 5px; padding: 1px; background: #e7e4df !important; text-align: center; border-right: 1px solid #b9b5aa; border-bottom: 1px solid #b9b5aa;}
.user-icon img {border: 10px solid #e7e4df;}
.user-icon span {background: transparent !important; text-align: center;}

/* mood, music, location */
.lj-currents ul {margin: 0px; padding: 0px;}
.lj-currents ul li {list-style: none;}
.lj-currents img {display: none;}

.entryMetadata-label {font-weight:bold;}
.entryMetadata-content {margin-left: 2px;}

/* --- tags --- */
.asset-tags-header {
display: block; float: left;
width: 3.5em; /* matches .asset-tags-content width */
height: 100% !important;
margin: 0px; padding: 0px;
font-size: 1em !important;
}
.asset-tags-list {margin: 0 0 0 3.5em; padding: 0px; list-style-type: none;}
.asset-tags-list li {display: inline; padding-right: 5px;}
.asset-tags-list a {white-space: normal !important;}

/* comments bar */
ul.asset-meta-list {clear: both; margin: 0px; padding: 0px; list-style-type: none; text-align: center;}
li.asset-meta-comments {display: inline; margin: 0px 15px 0px 0px;}

ul.asset-meta-list .item {border: 0px;}

.prevnext, .prev, .next {padding: 5px 0px;}

/* ----------------------------- */
/* ---------- SIDEBAR ---------- */
/* ----------------------------- */

.widget {margin: 120px 10px -93px 0px;}
.widget-inner {}

.widget-header {margin: 0px 0px 5px 0px; padding: 5px 0px 5px 0px; background-color: transparent; background: url(http://pics.livejournal.com/crucibelle/pic/0005b550) top center no-repeat; color: #3d4d4d; border-left: 0px solid #f07e0b; font-size: 1.2em; text-transform: uppercase; letter-spacing: 2px; text-align: center; font-family: Georgia;}
.widget-content {margin: 0px; padding: 0px;}

.widget ul {margin: 0px; padding: 0px 0px 0px 0px;}
.widget a {color: #3d998a;}
.widget a:hover {color: #996b2e; text-decoration: none;}

/* profile */
.about-me-widget {display: none; text-align: center;}
.about-me-widget .widget-header a {color: #333333;}
.about-me-widget .widget-header a:hover {color: #bbbbbb;}
.about-me-widget dl, .about-me-widget dd, .about-me-widget dt {margin: 0px; padding: 0px; width: 100%;}

/* calendar */
.calendar-widget {margin-bottom: 10px !important;}
.calendar-widget table {width: 100%; text-align: center;}
.calendar-widget p {margin: 5px 0px; padding: 0px; text-align: center;}
.calendar-widget tr:first-child a {background: transparent; border: 0px;}
.calendar-widget td a {display: block; width: 100%; color: #3d998a; background: transparent; border: 0px solid #f07e0b;}

/* link list */
.typelist-widget li.item {margin: 0px; padding: 0px; text-align: center; list-style-type:none; }

/* tags */
.categories-widget .widget-footer {padding: 20px 0px 0px 0px;}
.categories-widget li.item {margin: 0px; padding: 0px;}
.categories-widget li.tag {display: inline; padding: 0px 1px; background: none; }

/* post summary */
.archive-widget li.item {margin: 0px 0px 5px 0px; padding: 0px;}

.links-widget .widget-list .item {

margin-bottom: .2em;
border: none !important;
}

.widget-list .tagcloud {
list-style: none !important;
display: inline !important;
color: #ff0000 !important;
white-space: nowrap !important;
border-left: 0 !important;
width: 100% !important;
}

/* syndication, LiveJournal link, designer link */
.syndicate-widget,
.powered-widget,
.designed-widget {display: none;}

/* ----------------------------------- */
/* ---------- COMMENTS PAGE ---------- */
/* ----------------------------------- */

/* Comments ---------------------------------------*/
#comments {padding: 0px;}

div.comments-inner h2 {margin: 0px; padding: 1.5em 0 0 0; color: #3d4d4d; font-size: 2em; font-weight: normal;}

.comment {margin-bottom: 1.8em; padding: 0.9em 0; border-bottom: 0px dashed #bbbbbb; min-height: 130px; background:url(http://pics.livejournal.com/crucibelle/pic/000566kw) bottom center no-repeat;}
.comment-odd {background: url(http://pics.livejournal.com/crucibelle/pic/000566kw) bottom center no-repeat;}
.comment-even {background: #fcfcfa; background: url(http://pics.livejournal.com/crucibelle/pic/000566kw) bottom center no-repeat;}

.comments-nav {margin: 20px; text-align:center;}

/* --- reply, freeze, screen, etc --- */
.comment-links {margin-top: 0.9em; font-weight: normal; text-align: right; font-size: 1em;}
.comment-subject {font-weight: bold; }
.comment-date {margin-top: 0.9em; margin-bottom: 0.9em;}

/* Fix height in IE */
.comment {height: 1%;}

/* Quick Reply ---------------------------------------*/
.quickreply {margin-top: 1em; width:90%; padding-top: 5px; padding-bottom: 10px;}

#commenttext, #subject {width: 90%;}

#comment-form {width: 500px;}

/* ------------------------------ */
/* ---------- ARCHIVES ---------- */
/* ------------------------------ */

/* Calendar/Archive ---------------------------------------------------------------------- */

ul.year {text-align: center; padding: 0px;}
ul.year li {display: inline; padding: 0px 5px;}

table.yeartable {margin-left: auto; margin-right: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #bbbbbb;}
table.yeartable td.yearday {background-color: #e6e6e6; text-align: center;}
td.yearmonth {border-style: none; font-weight: bold;}

dd.viewsubjects {margin: 0 0 .75em .75em;}

.lj-view-month table {}
.lj-view-month widget table {margin: 0px !important;}

/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */

/* Sponsored Plus ---------------------------------------*/

#ad-5linkunit {
clear: both;
}

#ad-leaderboard {
margin-bottom: 10px;
}

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.comment-body:after,
#page-inner:after,
#header-inner:after,
#header-photo:after,
#content-inner:after,
#alpha-inner:after,
#beta-inner:after,
#gamma-inner:after,
#delta-inner:after,
#footer-inner:after,
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;
}

/* float in post bodies around enclosures */
#content-inner,
.asset-body {
height: 1%;
}

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }

/* ----------------------------------------------------------------------- */
/* ---------- PLEASE PASTE ANY FURTHER CSS OVERRIDES BELOW HERE ---------- */

/* ----------------------------------------------------------------------- */
.lj-view-friends span.ljuser a {color: #3d998a !important;}

#comments table {border: 0px !important;}

.lj-view-reply hr {display: none;}

bug:browser issues

Previous post Next post
Up