Problems with layout in IE 7 [SOLVED]

[crucibelle]

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

Comments

[av8rmike]

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]

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]

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]

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]

Fix still breaks it in Firefox. Playing with it on my test journal; not sure what the problem is, either.

[crucibelle]

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]

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]

"..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.

[crucibelle]

Yep, that's it. That is odd, because it's working on my end and on my boyfriend's resolution, too. Crazy.

[marahmarie]

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]

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]

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]

I wanted to thank you for all your help. I really appreciate it! =)

[marahmarie]

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.

[crucibelle]

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]

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.