HTML/CSS IE Not displaying my dropdown menu z-index related?

I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless! If you add a z-index and position to the container as well, it should solve your problem z-index only applies to positioned elements container { position:relative; z-index:0; } It is also worth reading Overlapping and z-index which summarises the properties and also describes the problems when using z-index and IE Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it.

I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.

Css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property You have filter:alpha(opacity=93) in both style.

Css and ie-style. Css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently If you remove the filter from both stylesheets then the menu correctly displays in IE8 If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.

I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless! If you add a z-index and position to the #container as well, it should solve your problem.

Z-index only applies to positioned elements. #container { position:relative; z-index:0; } It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE. Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it.

I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.

Css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version. So IE will have multiple copies of the same style being applied.

Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property. You have filter:alpha(opacity=93); in both style. Css and ie-style.

Css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8. If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.

Try installing IE Tester, it's a nice tool. – David Apr 13 at 14:25 1 @David Thanks! However, I should have been clearer... I have IE Tester but I'm on Windows XP with IE6 installed and IE8 does not work under Windows XP without IE7 as the installed browser.

One day I'll get the Microsoft VMs to do all this properly :-) – andyb Apr 13 at 14:31 Ah okay :D, it's a very nice tool! – David Apr 13 at 14:38 @andyb Unfortunately that didn't fix it. I've tried many combinations with z-index but cant seem to work.

– Resz Apr 13 at 20:12 Updated my answer, it looks like the filter is not correct for IE8. – andyb Apr 13 at 20:54.

Have a look at this solution : webdemar.com/webdesign/superfish-jquery-... Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others. Like so : //z-index 1 //zindex 2 //z-index3 Update 1 The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better.Do the following to get the layout the same in IE and Chrome and Firefox.

Watch out though, I only tested those change on the homepage. Add this to the . Conbox class : .

Conbox { position:relative; } Place the logo correctly #logo { position:absolute; left:0px; top:0px; } Remove the #nav positioning #nav { margin-top:80px; z-index:3; } The problem is, I can't even see any effect on the menu mouseover in IE!

I've tried that but that didn't seem to work. – Resz Apr 13 at 20:12 Give me a minute I'll see what I can do :) w3 validation Fix those errors, it should help, I,ll look at the css! – David Apr 14 at 12:52 I can't fix it, I'm struggling with the problem!

– David Apr 15 at 17:15.

OK so I had a look and there's good news and bad ;) the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more! ) That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter.. so the rule I landed up with looked like this (in an IE conditional comment): #nav ul li ul { zoom: 1; background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft. Gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.

Gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */ /* behavior: url(PIE. Htc);*/ /* yuk filter */ } and I thought it would be good to go.. BUT the Bad News the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently I didn't do too much research though so YMMV I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin that code replaces your main CSS - the #head rule and whole /*navigation*/ section Update: more good news and a little bad! You can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!

My solution: I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;) here's an update to the I conditional comment above.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.