Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Flash graphic floats above fixed elements when scrolling page.

Posted on 2008-06-25
6
Medium Priority
?
260 Views
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.

http://josephdavis-portfolio.no-ip.org/botkinsrealty/home.aspx

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.

http://josephdavis-portfolio.no-ip.org/botkinsrealty/css.txt
0
Comment
Question by:josephdaviskcrm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 43

Expert Comment

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

You need to set the wmode attribute:
http://forums.devshed.com/css-help-116/z-index-flash-file-getting-element-to-overlay-on-flash-505401.html

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

Author Comment

by:josephdaviskcrm
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?
0
 
LVL 43

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="http://www.macromedia.com/go/getflashplayer" base="." />

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

Accepted Solution

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

Author Closing Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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 update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

598 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