IE 7 z-index problem

[Sawtooth500]

Reference:

http://test3.waltonstreetwebdesign.com

So if you load it up in FF, it works like it should. You see the logo and the buy now thing in the upper right.

Now, in IE 7, the logo is just not there!

div container is the outermost container, with 700px and left and right margins set to auto for centering. It also has position relative. z-index of container is 0.

div logo is the div that contains the image for the logo and buy now thing that div is nested directed within div container. It is positioned relative, right 0px, and z-index 100.

So why does it not show up on top in IE???

Thank you for the help!

[coothead]

Hi there Sawtooth500,

in your stylesheet change...

#logo {
height: 195px;
width: 265px;
position: absolute;
right: 0px;
z-index: 100;
}
#main {
clear: left;
width: 700px;
}

...to this...

#logo {
height: 195px;
width: 265px;
float:right:
}
#main {
clear: right;
width: 700px;
}

[Sawtooth500]

If I do that then the background picture will not overlap with the buy now picture (since the background will be clear right), I need them to overlap.

Here's what I originally tried: The problem is that the "buy now" is supposed to overlap the background picture. The background picture is set as the background of div main_bg, which is nested in div main. Div main is set to clear left. If div main is only set to clear left setting div logo to float right should make the buy now image and the background image overlap. It does so in FF. IE, however, doesn't seem to understand the fine differences between clear left vs clear right, it just seems to do clear both regardless of what you set it so that solution did not work in IE.

Hence, I resorted to positioning and am trying to get it working via positioning. As a last resort, I *could* just chop up the logo/buy now image into multiple images, but I'll have to do a number of different chops because different individual pages will have different backgrounds, hence an overlap will make my life easier later.

[coothead]

Hi there Sawtooth500,

did you test my my solution or just comment upon it?

[Sawtooth500]

Tested it - go to http://test.waltonstreetwebdesign.com/
I posted a copy of the site with the modded CSS code at that URL.

Keep in mind my working URL for when I mod the site is: http://test3.waltonstreetwebdesign.com/
Currently the test3 URL is set to how I originally had it.

[coothead]

Hi there Sawtooth500,

I must apologize for my previous post. :o

When I first worked on the problem I changed the #logo rule to float:right and it worked OK in Firefox. :agree:
I then tried this change in IE7 and it still did not work so I changed #main rule to clear:right and solved the problem.

Unfortunately, I did not return to Firefoxx and check the result of this change. :o
So I suggest that you leave the code as it is and add this instead...

<!--[if IE 7 ]>
<style type="text/css">
#main {
clear: right;
width: 700px;
}
#logo {
float:right;
position:static;
}
</style>
<![endif]-->

...making sure that it is placed after...

<link href="css/style.css" rel="stylesheet" type="text/css" />

[coothead]

Hi there Sawtooth500,

I have realized that I have suffered from another of my Senior Moments. :eek:
The code that posted in my first post would have worked if I had not made a typing error. :o :o :o

I put a colon instead of a semi-colon after float:right which caused the problem in Firefox.

I apologize for the ensuing confusion.

Looking on the bright side you now have two options to choose from. :agree:

[Sawtooth500]

Still doesn't work in IE - check http://test3.waltonstreetwebdesign.com/ to see the results in IE.

I think the problem is that as long as div logo is float right and div main is clear right they will not overlap...

Regarding the positioning issue, I do remember encountering in another site I built a while ago something similar to this, in that case setting the positioning of the parent container from relative to absolute (in this case it would be div container) fixed the problem in IE. However, if I set div container to absolute then it doesn't center, which is a problem...

FYI this post was in regards to the IE conditional comments solution

[Sawtooth500]

The original non-conditional comment solution doesn't work in IE either... that one is posted at: http://test.waltonstreetwebdesign.com/

Although in FF that does work properly now with the colon replace by a semicolon... my question there is how is that possible? I thought if something was clear right it would clear all elements floated right, in FF it is overlapping the floated right element (being div logo)?

[coothead]

Hi there Sawtooth500,

I don't seem to be having a good day at the Office do I? :supereek:

Perhaps I should seriously think about retiring. :agree:

Anyway, I think that I have now, hopefully, nailed it this time...

<!--[if IE 7 ]>
<style type="text/css">
#main {
clear:right;
width: 700px;
margin-top:-87px;
}
#logo {
float:right;
position:relative;
}
</style>
<![endif]-->

...but am keeping my fingers crossed, just in case. ;)

[Sawtooth500]

Thanks for all the help coothead, you may be bald headed, but you're not an old fart! haha. This works for both IE and FF. See it at http://test3.waltonstreetwebdesign.com/

Now one last thing - I know this works with IE 7, supposedly IE 8, being CSS compliant, doesn't need the hack, but can anyone with IE 8 installed double check that? I only have one PC and I can't upgrade to IE 8 lest my ability to check sites in IE 7 be gone... thanks!

[coothead]

Hi there Sawtooth500,

like you I do not have IE8 on my PC but I do have IE6 - the browser from hell. :eek:
Are you concerned that your png images will display incorrectly in that browser?
If so you will need this fix placed after the IE7 conditional comment...

<!--[if IE 6 ]>
<style type="text/css">
#main {
clear:right;
width: 700px;
margin-top:-90px;
}
#logo {
float:right;
position:relative;

}
#tagline {
background:none;
}
#logo img, #tagline img {
background-image:expression(
this.runtimeStyle.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +this.src+ '", sizingMethod="image")',
this.runtimeStyle.backgroundImage='none',
this.src='images/blank.gif'
);
}
</style>
<![endif]-->

You will also need to place a small transparent gif,named "blank", in your images folder to complete the fix.

[Sawtooth500]

Thanks - personally I don't care about developing for IE 6, I just tell my clients if they want that it'll be extra... lol so far none have taken me up on that offer, but yes IE 8 I'm concerned about because people won't be going from 7 to 6 but eventually they will go to 8... Thanks for the help though! I'll just deal with 8 when/if it becomes an issue...