Nav drop downs hiding behind highlight page media.

[gunnargabrielsongmailcom 0]

Drop downs are going behind any images or video placed in the media section of the highlight page in Chrome and IE (goes behind for a second in firefox then corrects and goes on top..weird). I messed around with the z-index but didn't get any results. http://beta.wtcut.com/about-us/ Any help in correcting the problem is appreciated. Also note that in IE the TITLE section for the feature page become absolutely MASSIVE. I made a different post to address this problem.

[bryan-hadaway 3]

You need to use wmode for any Flash you're using in the feature:

<object height="290" width="512"><param name="movie" value="http://www.youtube.com/v/HwX2HnpNHdU&hl=en_US&fs=1&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/HwX2HnpNHdU&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="290" width="512" wmode="transparent"></object>

I've gone ahead and added it to your homepage video code. Thanks, Bryan

[gunnargabrielsongmailcom 0]

Perfect. You the man. <3

[bryan-hadaway 3]

That was fast, great to hear. Thanks, Bryan

[gunnargabrielsongmailcom 0]

Opps, followup. That fixed the issue in Chrome/Firefox/IE8. However it still does it in IE7 and IE6.

[bryan-hadaway 3]

IE is not standards compliant, you may already be aware that IE is horrible and makes any job difficult. I know you already tried z-index, but try adding this to your Custom CSS:

#nav{z-index:5000}

Thanks, Bryan

[gunn4r 0]

No dice. This isn't such a big deal for IE6 as only about 6% of our total hits are still on IE6, but a very large portion are using IE7. IE6/7 is also hiding the nav behind the images in the main feature rotator as well. This is definitely an issue that has to be fixed somehow before I can ever go live with the site.

[cmunns 16]

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html I'm thinking since the nav is position absolute and the other element is relative if we change them to be the same it may work Try changin css so `#nav { position:relative;top:75px;}`

[gunnargabrielsongmailcom 0]

So frustrating! No change.... below is the CSS referring to the nav and also to the feature/highlight areas. From style.css

#nav {
			position:relative;
			top:75px;
			z-index:5000; /* ie drop-down fix */
			font-size: 1.1em;
			line-height: 1.1em;
			float: right;
			text-align: right;
			right:0px;
			bottom: 0px;
		}

From pro.css:

.fcontent {
		color: #fff;
		position: relative;
	}
	#feature .fcontent {
		padding: 0 30px 0 0 ;
		width: 450px;
		float: left;
		height: 330px;
		font-size: 1.7em;
		display: inline;
		text-shadow: #000 0 -1px 0;
	}
	
	.fcontent h1, .fcontent h2, .fcontent h3, .fcontent h4, .fcontent h5, .fcontent h6{
		color:#fff;
		line-height: 1em;
		margin: 0;
		padding:0;
	}
		.fcontent .fheading {
			margin-bottom: .5em;
			margin-top: 20px;
		}
		.fcontent .ftitle{
			font-size: 55px;
			font-weight: bold;
	
			line-height: 1.2em;
			vertical-align: middle;
		}
		.fcontent .fsub {
			font-size: 25px;
			margin: -5px 0;
		}
	
		.fcontent .ftext{
			line-height: 1.1em;
		}
		.fcontent p{
		}
		.fcontent a {
			color:#fff;
			border-bottom: 1px dotted #fff;
		}
		.fcontent a.featurelink{
			border: none;
			line-height: 20px;
			font-weight: bold;
			font-size: 1em;
			padding-right: 26px;
			background: url(../../images/more.png) no-repeat 90% 50%;
		}
	
		.fcontent a.featurelink:hover{
			color: #eee;
		}
	
	.fmedia {
	    padding: 0;
		overflow:hidden;
	}
	#feature .fmedia{
		margin-top: 10px;
	    width: 480px;
	    height: 330px;
		float: left;
		overflow: hidden;
	}
	
		.fmedia img {
		    top:  0;
		    left: 0;
		}
	
	#highlight {
		width: 100%;
		margin:0;
		color: #fff;
		position: relative;
		text-align: left;
		text-shadow: #000 0 -1px 0;
	}
	
	#highlight .content {
	}
		#highlight h1 {	text-align: left; margin-bottom: 12px;}
		#highlight p, #highlight .fcontent{	text-align: left;  }
	
		#maincontent #highlight p, #maincontent #highlight .fcontent {color: #fff; }
	
		#highlight .fcontent {
			float: left;
			width: 350px;
			padding: 50px 0;
		}
		#highlight .fcontent a{border-bottom: 1px solid #fff;}
		#highlight .fmedia {
			padding-top: 20px;
			width: 520px;
			margin: 40px 20px;
			float: right;
		}

[gunnargabrielsongmailcom 0]

Okay I found the fix.... the page that helped me understand the IE Z-index bug is here: http://livebinders.com/play/play_or_edit/1808 The fix I used was to set the parent div of the Nav menu to a higher z-index than the body div. Adding a z-index greater than 0 to the #header .content is what will make it work. The new code looks like:

#header .content{ position: relative; zoom: 1; z-index: 100; }

Might be good to include this value in the release so others don't have to deal with the headache!

[bryan-hadaway 3]

Wonderful, thank you so much for sharing, this is bound to help others. Thanks, Bryan

[infotwistedtoolscom 0]

i had a similar problem with the iblog forum. one of my menus would end up transparent and would hide behind the 'last comment by josh' area of the forum topics section. i added the following to solve the issue in the forum's admin custom css area: /*-----FIX FOR FORUM MENU TRANSPARENCY BUG*/ #header .content{ position: relative; zoom: 1; z-index: 100; } #nav { position:relative; z-index:5000; /* ie drop-down fix */}

[jerichomccain 0]

I'm having this problem on our front page @ http://www.operationdefuse.com This is the YT embed code I'm using for one of the videos on the feature page:

<object width="610" height="368"><param name="movie" value="http://www.youtube.com/v/I_ttfMb_hMg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="transparent"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/I_ttfMb_hMg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="610" height="368"></embed></object>

It appears to work on some browsers and not on others. It consistently doesn't work w/ Chrome 5.0.3. Any ideas?

[bryan-hadaway 3]

That is because your code is missing the transparent tag for embed, here's the corrected code: `

[russellprisco 0]

Thanks for this =)

[travistsickle+ 1]

I added this...and it didn't work. help please. #header .content{ position: relative; zoom: 1; z-index: 100; } www.sicklehunter.com