?

Log in

No account? Create an account

Previous Entry | Next Entry

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

( 13 comments — Leave a comment )
av8rmike
Feb. 23rd, 2008 10:51 pm (UTC)
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
Feb. 24th, 2008 11:32 am (UTC)
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... :)



Edited at 2008-02-24 11:33 am (UTC)
av8rmike
Feb. 24th, 2008 02:51 pm (UTC)
Why didn't it work in IE? Sorry, I know very little about Opera or why something like this wouldn't work.
frijo
Feb. 24th, 2008 04:24 pm (UTC)
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*

Edited at 2008-02-24 04:59 pm (UTC)
av8rmike
Feb. 24th, 2008 06:38 pm (UTC)
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
Feb. 24th, 2008 07:05 pm (UTC)
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
Feb. 24th, 2008 07:10 pm (UTC)
When nothing seems to be working, I drop back and adopt the "less is more" approach, especially when working with the default stylesheets.
frijo
Mar. 6th, 2008 07:51 pm (UTC)
IE7 doesn't stop to amaze me...
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?

av8rmike
Mar. 7th, 2008 01:10 am (UTC)
Re: IE7 doesn't stop to amaze me...
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.
frijo
Apr. 3rd, 2008 10:41 am (UTC)
Re: IE7 doesn't stop to amaze me...
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...
frijo
May. 18th, 2008 12:38 pm (UTC)
New IE7 problem - solved
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.



Hope you can help me! :)

ETA: I've changed the image format from png to jpg in case that caused the problem for some reason, but it doesn't make any difference.

ETA 2: !important in background: url(http://myimage.png) top left repeat-x !important; did the trick in the sidebar.

I also moved the header background from #header{} to #header-inner{}, and the background I had in #header-inner to ul.nav{}. Solved the problem in the header.



Edited at 2008-05-24 11:04 am (UTC)
av8rmike
May. 28th, 2008 08:16 pm (UTC)
Re: New IE7 problem - solved
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?
frijo
May. 30th, 2008 11:00 am (UTC)
Re: New IE7 problem - solved
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 ;)
( 13 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