?

Log in

No account? Create an account

Previous Entry | Next Entry

Problems with layout in IE 7 [SOLVED]

  • Nov. 29th, 2008 at 11:57 PM
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;}

Comments

( 29 comments — Leave a comment )
samantilles
Nov. 30th, 2008 05:19 am (UTC)
absolutely gorgeous layout-- just dropping you a note to let you know it also works with Apple Safari, so it might just be a IE 7 issue-- I have those a lot (as it will deal better in Firefox and all the other browsers but not IE)
crucibelle
Nov. 30th, 2008 06:05 am (UTC)
Thank you! It took me forever to create it. I'm happy to hear that it works in Apple Safari! Ideally, I'd like it to work in all browsers, but I know that's not going to happen. I just hope that this IE issue with my journal is one that can be fixed! Thanks again! =)
av8rmike
Nov. 30th, 2008 06:44 pm (UTC)
It might not have anything to do with the problem, but I noticed that the image is 1095 pixels wide, but you have the width of #header{} set at only 1094. What happens if you try changing the width to match the image?
crucibelle
Nov. 30th, 2008 07:20 pm (UTC)
I'm sure that has something to do with it, I just don't know what -- because when I change the width to 1095px, then everything shifted one pixel off in Firefox. I wonder if shaving a pixel off the image would work? I dunno. This issue is even stranger than I originally thought, though. If I change the page width one pixel (one pix less), it fixes the issue in IE, and it still looks fine in FF... IF the screen res. is over 1024 x 768. This might also have something to do with the overflow:hidden I added to #container. I did that, because my journal was scrolling on 1024 x 768 and I had some people complaining. I really don't want to make my layout smaller, because I have a huge monitor, and I don't want everything to be tiny. Thank you for your help!
marahmarie
Dec. 1st, 2008 04:05 am (UTC)
Is this what you're seeing in IE 7?

http://pics.livejournal.com/marahmarie/pic/000155wk

That screen cap was taken with IE 8 running in IE 7 mode.
crucibelle
Dec. 1st, 2008 04:12 am (UTC)
Yep, exactly. I've looked around on the internet and it seems as though this is a Firefox 3 bug, instead of IE. I've got it 'fixed' for Firefox, but that screws it up in IE. I think I may have found a fix though. I'm testing it.
marahmarie
Dec. 1st, 2008 04:19 am (UTC)
Fix still breaks it in Firefox. Playing with it on my test journal; not sure what the problem is, either.
crucibelle
Dec. 1st, 2008 04:23 am (UTC)
I found a way to fix it both in Firefox & IE... at high resolutions (I have wide screen). However, on my boyfriends monitor (1024 x 768) it's still one pixel off in Firefox. This makes no sense.
crucibelle
Dec. 1st, 2008 05:44 am (UTC)
I think I fixed it, but I had to use invalid CSS to do so. Not too happy about that, but it seems like that's the only thing that's going to work.
marahmarie
Dec. 1st, 2008 06:08 am (UTC)
"..invalid CSS..."

Are you talking about this?

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

That is a heck of a hack. Firefox somehow displays the page correctly with it in use, but I don't know how since both values by themselves screw the page up. In IE 7 it looks worse than ever with it...the space grew from 1-2px to over 5px (on 1024 x 768).

I've messed with just about every value related to header, body, page, beta, and alpha both in 1024 and in much higher res but the same problems arise no matter what I try. It's probably something exceedingly simple but I just cannot think what.

I also resized your header and body pics into one-pixel smaller and one-pixel larger dimensions and changed some values to see if that helped, but it didn't. Strange.

Edited at 2008-12-01 06:09 am (UTC)
crucibelle
Dec. 1st, 2008 06:40 am (UTC)
Yep, that's it. That is odd, because it's working on my end and on my boyfriend's resolution, too. Crazy.
marahmarie
Dec. 1st, 2008 06:24 pm (UTC)
Actually, it's in IE 8 that the space increases to about 5px:

http://img258.imageshack.us/img258/4708/20081201131359ok6.jpg

In IE 7 the space stays about the same (1-2px):

http://img165.imageshack.us/img165/8951/20081201131342kw8.jpg

I tried testing your journal at browsershots.org since that website would allow me to see the layout at different resolutions and on different operating systems but robots.txt for your journal blocks access.
crucibelle
Dec. 1st, 2008 09:11 pm (UTC)
Oh boy, that is just awful! Yes, I realized that I only tested in 1024 X 768 in FF, not IE. I'm still wondering if it has anything to do with the overflow:hidden I added to the container, because that is when the problem started (at least I think that's when it started).
marahmarie
Dec. 2nd, 2008 02:53 am (UTC)
BTW, your overflow: hidden has no effect on it whatsoever (and I was going to say that about five replies ago but I forgot). I've been playing with your CSS this afternoon/early evening to no avail, but at least you can rule that out as the problem.
crucibelle
Dec. 1st, 2008 09:36 pm (UTC)
I wanted to thank you for all your help. I really appreciate it! =)
marahmarie
Dec. 2nd, 2008 01:42 am (UTC)
I don't know what to make of it but there is a 1px difference (edit: remeasured to make sure) between the banner and the page body where the posts go, with the banner being the smaller of the two (729px as opposed to 730px for the body). That's measuring from outer-most line to outer-most line within each element, leaving out the drop shadows.

Edited at 2008-12-02 02:01 am (UTC)
crucibelle
Dec. 2nd, 2008 02:09 am (UTC)
I'm not understanding what you are referring to, here. The header is 1095px, but I'm having to resize it to 1094px in the css or it's screwed up in Firefox, as well. I don't think this is fixable. =(
marahmarie
Dec. 2nd, 2008 02:16 am (UTC)
I was going to screen cap it for you to explain but I just measured again and now it looks about right (both elements are at 730px - my measuring must have been sloppy the first two times, but at least I checked again - and at least you've already tried re-sizing, so no loss there)...I just don't know what the problem is. I know how I normally fix a problem like that, but none of things I've tried have worked.
crucibelle
Dec. 2nd, 2008 02:25 am (UTC)
I figured out what you were talking about... and it does look like it's a bit off. I'm not sure.
marahmarie
Dec. 2nd, 2008 02:35 am (UTC)
Even with measurements I'm not sure, either. If I had to take a guess it would be too small to measure (say, a .3px difference). How that would add up - even with margins and/or padding - to a visible 1px difference - depending on which browser either of us is using - is beyond my grasp of positioning elements on a web page, unfortunately.
marahmarie
Dec. 2nd, 2008 01:46 am (UTC)
I have tried adjusting page-body width to even everything out but it doesn't work. I'm not saying you should but perhaps resizing the banner in PS and giving it one more go...? I have tried adjusting every page, body, alpha, banner, and header dimension there is several times over to accommodate the inexact image measurements and there's just no doing it. Without margins or padding the positioning is off by something like 8.5px, but even removing said margins and padding and adding the 8.5px back in as body property leaves that one-pixel space.

The only other thing I can mess with is .asset. I doubt if it'll help but I'll give it a look-see. (Edit: Nope. Doesn't.)

Edited at 2008-12-02 02:01 am (UTC)
crucibelle
Dec. 2nd, 2008 02:10 am (UTC)
I tried resizing everything. I thought it just might be too big, so I sized everything down (in photoshop) to around 850px wide. Still didn't work. I'm stumped.
marahmarie
Dec. 2nd, 2008 02:18 am (UTC)
Where did you see that it was a Firefox bug, BTW? I would love to read more about that; maybe knowing exactly what bug is causing it would help me find the fix for it too on the great wide Interwebs.
crucibelle
Dec. 2nd, 2008 02:40 am (UTC)
There's several links, when googling "1 pixel shift in Firefox" (actually, I searched "1 pixel shift in IE 7" and got many more Firefox results). Anyhow, here is one of the links. It's a forum post:

http://fixunix.com/mozilla/539345-1-pixel-shift-right-not-fixed-any-so-called-hacks.html
crucibelle
Dec. 2nd, 2008 02:42 am (UTC)
It does appear to have something to do with browser width... like i said, I can get it fixed in both IE & Firefox, but it is then screwed up in a lower res. However, I have seen other people make layouts similar to mine, and they don't have the shift. So I've done something wrong. I just don't know what.
marahmarie
Dec. 2nd, 2008 02:50 am (UTC)
Well, I don't know if you've done something wrong, especially after reading the thread you linked me to above. The funny thing is, the browser test the guy created on Geocities displayed perfectly for me in Firefox 3.0.4 but was off by about 10px in IE 7. It's just wild how browsers are still so unpredictable even today.
crucibelle
Dec. 3rd, 2008 02:28 am (UTC)
Yeah, it's a real pain in the ass. I wish all browsers worked the same way... when it comes to css, at least. I think I might have it fixed. I can't be sure, because I'm not able to test on 1024 x 768 at the moment.
marahmarie
Dec. 3rd, 2008 05:17 am (UTC)
27 comments later, we finally have our answer.
The *html hack? Yes, that fixed it - and on 1024 x 768 as well. Good work!

Just in case anyone else wants to know what you did, the hack used was:

*:first-child+html #header {width: 1095px;}

And what it does is solve our inability on LJ to use conditional comments to style CSS specifically for IE 7 - "conditional comments" being any CSS that starts with a statement like:

<!--[if IE 7]>

I called it the "*html hack" but it's really not - that hack was used in IE 6. The hack used in the above example is more like an outgrowth of it since the parsing bug in IE 6 was fixed in IE 7 - but that created another bug in IE 7 that this new hack fixes.

Edited at 2008-12-03 05:38 am (UTC)
crucibelle
Dec. 3rd, 2008 11:52 pm (UTC)
Re: 27 comments later, we finally have our answer.
Ahhh, finally! Thank you for all your help. =)

I found the hack here: http://www.webdevout.net/css-hacks
( 29 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars