Flash graphic floats above fixed elements when scrolling page.

Posted on 2008-06-25
Last Modified: 2013-11-19
OK... The only real way I know how to describe this to you is simple by showing you.  Navigate to the following link in anything but Firefox or IE6 and scroll down on the page.

As you can see, I have a navigation bar that is fixed to the top of the page.  But when you scroll the page down, the flash graphic slides over the top of the navigation bar.  Firefox is the only browser that the page displays correctly in.  IE6 does not display the navigation bar fixed to the top of the page, so the problem is not evident in IE6.  But in IE7, Opera, and Safari, this problem occurs.  To see the CSS I'm using to build all this, go to the link below.
Question by:josephdaviskcrm
  • 3
  • 3
LVL 42

Expert Comment

by:David S.
ID: 21871927
Actually the problem is occurring in FF3 too.

You need to set the wmode attribute:

Yeah, IE6 doesn't support position:fixed. There are several workarounds for it around.

Author Comment

ID: 21872001
Ok... so I added <param name="wmode" value="transparent" /> to my flash object on the page.  That did fix the issue in IE7, but it remains in Opera, Safari, and more than likely in FF3 also.  Can you give me any further assistance?
LVL 42

Expert Comment

by:David S.
ID: 21872028
You need to set the wmode attribute on the <embed> too.
<embed src="Flash/Home.swf" quality="high" bgcolor="#ffffff" width="682" height="236" 
name="Home" align="middle" wmode="transparent"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" base="." />

Open in new window

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.


Author Comment

ID: 21874598
That didn't seem to help any more.  I'm still having the issue with Opera and Safari.
LVL 42

Accepted Solution

David S. earned 500 total points
ID: 21879048
You added the wmode attribute to the <object> instead of the <embed>? You need to move it to the <embed>.

Author Closing Comment

ID: 31470856
Awesome.  That worked. It now functions correctly in all browsers.  Thanks.

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Big gap on page with the Samsung Galaxy S7 EDGE and no other mobile device! 3 45
manage footer size 4 53
Input box width 6 26
Border and image sizing 5 19
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question