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*