Z-index issues in IE?

Hi, the site I’m working on: http://moetinstitute.com seems to be looking good in all browsers except IE (no real surprise there). The problem is the drop-down navigation appears behind the swf file in the content section. I read online that z-indexes are issues for IE, but I’m having a lot of trouble trying to figure this out. I thought I’d adjusted parent z-indexes to be higher than the drop-down, but I guess I’m wrong. Any suggestions would be very much appreciated.

One more thing: it’s IE8 where I’m testing it – not sure how it looks on other IE browsers.

Thanks for your help.

JB

Actually, I found a previous thread that helped me out. Thanks!

Based on the previous thread, I added <param name=“wmode” value=“transparent”> to the embed code, which worked great for IE, but still not for Chrome. I’m really dying here. Any help would be greatly appreciated. I can’t seem to find any answers.

I’m not getting any responses, and I certainly hope it’s not because I’ve somehow broken forum decorum. I’ve searched through previous posts, but still have not found what I need. Any help would be greatly appreciated. The code is this

	&lt;div id="content-container"&gt;
		&lt;div style="margin: 35px 0 0 10px; z-index:-1;"&gt;
            &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="941" height="453" id="myFlashContent"&gt;
                &lt;param name="movie" value="moet.swf" /&gt;
                &lt;param name=&#8221;quality&#8221; value=&#8221;high&#8221;&gt;
                                    &lt;param name="wmode" value="opaque"&gt;                         
                &lt;param name="wmode" value="transparent"&gt;      

                                                                         
                                                
                &lt;!--[if !IE]&gt;--&gt;
                &lt;object type="application/x-shockwave-flash" data="moet.swf" width="941" height="453"&gt;
                &lt;!--&lt;![endif]--&gt;
                    &lt;div id="animation"&gt;&lt;/div&gt;
                &lt;!--[if !IE]&gt;--&gt;
                &lt;/object&gt;
                &lt;!--&lt;![endif]--&gt;
            &lt;/object&gt;

I wouldnt overreact about not getting any responses as its only been a day and many people in the country are dealing with the horrible weather. Many people on this iste have helped me out so Im sure someone will come along.
I would like to TRY and help, though Im not a pro, I am in school for this stuff. Is your site online? If so whats the addy?

Sorry I just saw ur site IS listed. LOL. I went to it but dont see any issue in IE. What exactly am I looking for?

Try using only one wmode parameter.

Thanks for posting, but I figured it all out late last night. It’s all working fine now. I appreciate your looking at it!

Glad you solved it. What was it?

I was very interested in your site becasue of the menu. I noticed it doesn’t work in IE6 and I read someplace where that takes some java script. If you ever get that answer would you please post.

Well… first thing I’d suggest is axing the giant flash for nothing element. Total waste of bandwidth and outright annoying – much less that by default users like myself get this giant empty white box since I have flash disabled by default… it’s also too tall pushing anything resembling actual content clean off the page – and stuffing text inside the flash means search engines won’t actually even see that content – and neither will a lot of users…

THEN I’d suggest bumping the font sizes in the areas where you are forced to use PX (like the menu) into something LEGIBLE, and then convert the areas of content into DYNAMIC fonts so that they auto-enlarge for people who cannot read your illegibly small and effectively useless… what is that, 10px? 8px?

THEN since that appears to be built in turdpress I’d highly suggest you read Craig Buckler’s recent article on stripping all the useless garbage markup out of the HTML, given that 90% of the classes auto-inserted by the 2008 pwnie winner are nothing more than wasteful bloat to go hand-in-hand with the unneccessary DIV and non-semantic markup.

You have an accessibility train wreck there, which combined with it chewing 315K to deliver less than 1k of plain text means it needs to be thrown out COMPLETELY and started over from scratch.

Hi,

Sorry you didn’t get a reply the other day but I’ve been away for a few days and a lot of others are away at the moment also. Weekends are always a bit slow on the forums.:slight_smile:

Looking at your page I notice you seem to have embedded another html page inside which is not allowed.


</div>
<div id="content-container">
<div style="margin: 35px 0 0 10px; z-index:-1;">
[B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="resources/swfobject.js"></script>
<script type="text/javascript">
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.wmode = "transparent";
            params.allowscriptaccess = "always";
            var attributes = {};
            attributes.id = "moet";
            swfobject.embedSWF("moet.swf", "animation", "941", "453", "9.0.0", false, flashvars, params, attributes);
        </script>
</head>
<body>
<div id="animation">
    <div id="animation"></div>
</div>
</body>
</html>[/B]
</div>
</div>
</div>


If that was because of an “include” then you should only include the relevant html and not a whole document.