Aargh, just aargh! Some problems with/in IE7...

[frijo]

Why can't IE7 display the header-image (800x200) and the image in #content-inner like firefox and opera? Any ideas? It's in my "layout journal". Help very much appreciated :)

ETA: Problem solved. But there are more IE7 problems in the comments...

Comments

[av8rmike]

IE seems to have problems when using big margins to position elements. Try using relative positioning on the header nav links, by changing:
ul.nav {
width: 800px;
height: 50px;
margin-top: 200px;
background-color: #555;
}to this:
ul.nav {
position: relative;
top: 200px;
width: 800px;
height: 50px;
background-color: #555;
}Although, I haven't tested it in IE, so I don't know if that'll do it.

[frijo]

It didn't work, unfortunately. But I found a similar layout made by grrliz, and she used

position: absolute;
bottom: 0px;
left: 0px;
padding: 0px;

This solved the problem, but - of course - there is a new problem. Everything looks just fine in IE7, opera and ff, but the nav-links don't work in opera anymore... I googled a bit, and it seems opera doesn't like position: absolute; very much. But I haven't been able to find a solution for it so far.

Please tell me you know how to work around this problem... :)

[av8rmike]

Why didn't it work in IE? Sorry, I know very little about Opera or why something like this wouldn't work.

[frijo]

Why didn't it work in IE? I have no idea... But I've played a bit more with the code and removed, among other things, position: absolute; and tried again with position: relative; in #header and in ul.nav. Now the nav bar looks fine and also works in all three browsers BUT the header is larger in IE7, for some strange reason (which is why we see a white background beneath the red image). I mean, #header height is 250px, nav-bar line height is 50px and the image's height is 200px - everything should fit just perfectly. But it doesn't...

ETA: I take it back, nav bar looked fine in IE on linux, but in windows IE7 I have pretty much the same problem as described in my initial post. *sigh*

[av8rmike]

OK, this is what I did: I took out the positioning in the #header blocks, put the sizing and background image in #header-inner, where it should go. Then I changed the positioning of the nav links.
#header{
border: 5px solid #cecece;
overflow: hidden;
}

/*Links in header */
#header-inner {
background: #555 url(http://i228.photobucket.com/albums/ee6/frijo_swe/test_header.png) no-repeat left top;
width: 790px;
height: 250px;
}

ul.nav{
position: relative;
top: 210px;
background-color: #555;
}
#header-photo-inner {width: auto !important;}The last line is the really important one (no pun intended) because I've noticed that IE sometimes inserts extra margin above the nav links because of this empty div with 0px width. I've checked it on IE7 and FF, and it looks exactly the same. If something isn't right with Opera, I have no idea why.

[frijo]

OMG, it works!! And in Opera too!! And good thing I checked my mail again before I hit the "post comment" button to send you a looong explanation of my recent changes - which, of course, still didn't work LOL God, this extra margin was driving me crazy... And Opera is usually not the problem, it's just seems to have trouble with position: absolute;, for whatever reasons.

Thanks so much!!! You saved my day :)

[av8rmike]

When nothing seems to be working, I drop back and adopt the "less is more" approach, especially when working with the default stylesheets.

IE7 doesn't stop to amaze me...

[frijo]

I made myself a new journal layout and everything looks just how I want it, but then I went and tested it in IE7 and the header image is for some reason much darker in IE7. The image is supposed to blend in with the rest of the page's background... *sigh* Works just fine in firefox/opera

Is there an explanation for this, and is it possible to do something about it?

Re: IE7 doesn't stop to amaze me...

[av8rmike]

Looks like there are problems with IE7's PNG rendering. I found this thread after searching for "IE7 PNG render". I'm not sure I can be of more help, other than the advice in that thread to switch to JPG.

Re: IE7 doesn't stop to amaze me...

[frijo]

Totally forgot to tell you that switching to JPG helped. Thanks! Right now I have a layout without an image in my header, but that will change pretty soon again, I'm sure...

New IE7 problem - solved

[frijo]

I've played a bit with my journal layout - again - and stumbled across a problem in IE7 - again. IE7 does not show the (sidebar) header background in #header{} (pink dot) and in .widget-header {} (green dot). Why? Works just fine in Firefox/3.0b5 and Opera 9.27.

Re: New IE7 problem - solved

[av8rmike]

Sorry, but I've had very little time at home over the last few weeks to investigate problems. Were you able to get it worked out on your own?

Re: New IE7 problem - solved

[frijo]

Yeah, !important was the magic word here. But there is no need to apologize, I know how it's like to have very little time - though it doesn't stop me from playing with my layout every now and then ;)