Solved

Flash graphic floats above fixed elements when scrolling page.

Posted on 2008-06-25
6
252 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
  • 3
  • 3
6 Comments
 
LVL 42

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

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 42

Accepted Solution

by:
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>.
0
 

Author Closing Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

862 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now