July 6, 2008 12:15am pdt

1. hielo 386,397
2. Kravimir 376,543
3. Steggs 245,900
4. GreenGhost 94,190
5. VirusMinus 85,980
6. TName 76,385
7. glumlun 69,115
8. zemond 65,705
9. bluefezteam 58,707
10. jason1178 54,865
11. Rouchie 53,810
12. mplungjan 49,735
13. Eternal_... 45,043
14. b0lsc0tt 41,464
15. nexusnation 41,350

1. VirusMinus 1,293,260
2. Steggs 1,084,490
3. GrandSch... 1,081,204
4. seanpowell 807,340
5. TName 775,768
6. Roonaan 484,352
7. Eternal_... 423,020
8. COBOLdin... 415,775
9. hielo 403,865
10. Kravimir 376,543
11. oceanbeach 262,232
12. mreuring 246,046
13. Batalf 232,544
14. GoofyDawg 183,739
15. brunobear 180,148

02.05.2008 at 12:53PM PST, ID: 23139350

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

5.0

Moving Div Containing Flash Floats Over Static Flash Div But Static Appears On Top: Why? (Firefox)

Zones: Cascading Style Sheets (CSS), JavaScript, Dynamic HTML (DHTML)

Tags: CSS, JavaScipt, Flash, Firefox, http://pdfserver.amlaw.com/Production/WebApp/view/pages/APTI/myaccountprofiledemo.html

The error I'm getting only appears in Firefox.

I've got an HTML div called "floating flash", which contains a flash movie. By using JavaScript and CSS, the div floats onto the screen and moves down to a designated position on the page. Underneath this position there is space where a dynamically generated ad appears and remains in its static position. When this dynamically generated ad is a regular image, the page functions as expected. When the ad is a Flash movie, I get a bug: the floating flash appears below the static ad. In other words, the floating flash div should always be on top, never below anything on the page. This does not appear to happen in IE7 or IE6.

The floating flash div is only meant to appear once a day so you'll have to clear your browser's cookies in order to test it each time you'd like to see it. The code appears for the floating flash div appears at the very bottom of the HTML page (search for the word 'interstitial'). If you have Firefox's Firebug extension you'll be able to see the CSS and JS file that make the floating flash div work (both are called 'interstitial')

http://pdfserver.amlaw.com/Production/WebApp/view/pages/APTI/myaccountprofiledemo.html

I have to note: whatever the solution is it must work in Firefox, IE7 & IE6. Let me know if you need me to post any code or give any additional information.

This must be fixed today so I'm giving the most points I can. Thank in advance for your assistance.

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: JaeWebb

Solution Provided By: Lakio

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

02.05.2008 at 01:25PM PST, ID: 20827194

Rank: Guru

Lakio:

I dont see the problem, screenshot?

02.05.2008 at 02:42PM PST, ID: 20827913

JaeWebb:

This is a screenshot of the effect.

http://www-stage.law.com/interstitial_test_screenshot.html

To recreate the effect on your own computer, please remember: the static ad is dynamically generated and may be an image or a Flash movie. If you don't see the Firefox error, clear your cookies and browser cache, then refresh the page; do this until a the static ad appears as a Flash movie.

02.05.2008 at 05:26PM PST, ID: 20828800

JaeWebb:

I put Z-index values on the floating flash div and on the skyscraper ad that appears on the right side (the under-side ad overlapping in the floating flash div in the screenshot).

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:

           
           
             /* EXTERNAL CSS FILE FOR PAGE */
 
#adscol .skyscraper {
     clear:both;
     display:block;
     margin:0pt 0pt 8px;
     position:relative;
     z-index:1;
}
 
/* INLINE STYLE FOR FLOATING FLASH DIV (Note the Z-index) */
 
<!-- INTERSTITIAL AD SECTION -->
<div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%; z-index:100;"> 
        <!-- This is the close button that appears over generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
                
        <!-- This is the link to the remote OAS ad tag -->
  <script type="text/javascript">
	if ( userHasNotSeenAd() ) {
	   showAd = true;
	   document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/lawhome/@x96"></scr'+'ipt>');
	   
	   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
	   setTimeout('showHideButtonIfAdScheduled()', 1000 );
	}
	</script>
        
</div> 
<!-- END INTERSTITIAL AD -->

           
         

Open in New Window

02.05.2008 at 05:27PM PST, ID: 20828805

JaeWebb:

I meant to add this: I added z-index but it didn't work. I still need help creating a fix for this.

02.06.2008 at 01:17AM PST, ID: 20830568

Rank: Guru

Lakio:

I dont see the screenshots but try making the wmode transparent for the flash

http://www.flash-here.com/tutorials/flash_transparent_bkg.html

02.06.2008 at 02:09AM PST, ID: 20830737

JaeWebb:

Sorry about the screenshot link; I'll fix that tomorrow (a few hours from now). If you want see the effect, I'm sure you'd see it if you clear your cookies and refresh Firefox 2, maybe three times. The skyscraper advertisement often appears as flash so you should see the bug.

In the morning I'll try the 'wmode' idea but I must say - I'm not sure how that will help with I can only affect the Flash code for the floating flash div. This div only expands as far as the movie and the movie is a square with no parts that are meant to be transparent. I don't understand how making the floatingflash div 'transparent' will solve the issue of the dynamic skyscraper ad underneath it appearing on top of it... I cannot modify the skyscraper ad code - only the HTML/CSS box used for displaying it.

02.06.2008 at 03:28AM PST, ID: 20831076

Rank: Master

Jezcentral:

The flash movie will always apear on top of the page, You cannot float an element over it, as the flash movie is not actually part of the rendered page, it lies on top of it.

As Lakio mentioned, there is a way of making the flash background transparent, but not the whole thing.

02.06.2008 at 04:02AM PST, ID: 20831233

Rank: Guru

Lakio:

thats not true, you can make a div float on top

02.06.2008 at 04:24AM PST, ID: 20831336

Rank: Master

Jezcentral:

Really? I thought that could only be done if the flash movie had been coded in a particular way, and as he doesn't have access to it, he couldn't make the necessary changes to do that. I stand prepared to be corrected.

02.06.2008 at 07:00AM PST, ID: 20832417

Rank: Guru

Lakio:

http://www.motormax.is/

ee.png (323 KB) (File Type Details)

Div menu floating over flash

02.06.2008 at 10:41AM PST, ID: 20834496

JaeWebb:

I hadn't noticed this cool attachment feature...

Thanks, but your idea isn't quite what I'm looking for. The top object must completely cover the bottom object. In the screenshot I just attached, this is not true; the blue Quest ad should completely cover the black skyscraper ad beneath it.

Does anyone have any ideas on how to resolve this Flash conflict?

screenshot.jpg (38 KB) (File Type Details)

Screenshot for Firefox bug depicting overlaping divs with Flash movies inside

02.06.2008 at 11:13AM PST, ID: 20834765

JaeWebb:

The new demo location is here:

http://www-stage.law.com/interstitial/interstitial_test_screenshot.html

02.06.2008 at 11:16AM PST, ID: 20834790

JaeWebb:

I mean here: http://www-stage.law.com/interstitial/index_interstitial_test.shtml

Sorry for all of the posts.

02.07.2008 at 01:38AM PST, ID: 20839386

Rank: Guru

Lakio:

I have some ideas but none of the links work for me (I am in Iceland does that matter?),

LOL I just read this now "I cannot modify the skyscraper ad code", sorry I did not read everything.

1. you can maybe change it with javascript?
2. you can put the floating ad in an iframe element, best bet ;)

02.11.2008 at 11:47AM PST, ID: 20869519

JaeWebb:

I'm sorry that you cannot see the links, Lakio. I do not know why you can't; I put the files up on my company's testing server so you should be able to.

You have some some good ideas. I'm investigating how to do this with JavaScript right now. I cannot see the iframe idea working; I'd like to see more but I don't have the framework to test that idea myself.

Is there anyone else out there that can help out with this issue? If I don't get a solution by the end of today I'm going to ask the administrators to close this thread.

02.11.2008 at 12:35PM PST, ID: 20869965

JaeWebb:

I created a flat test-version of the page and changed HTML to TXT; just change it back. The support files have '.txt' added to the end; just delete that part and put the two support files into a folder called 'src'. From there, make sure all of these files are together in a in a test directory and launch the HTML file.

From this point you will see two versions of the same Flash ad. One will be stationary and the other will float onto the screen. The one that floats should always be on top. The problem is that it isn't. To fix this issues, I must have the floating Flash on top at all times.

Don't forget to clear your cookies and cache after each test; the ad is set to show only once per day.

Time is of the essence. Thanks for you help.

interstitial-HTML-forInsert--FLA.txt (1 KB) (File Type Details)

change the file extension to 'HTML'

interstitial.css.txt (717 bytes) (File Type Details)

place this in a folder called 'src' and delete '.txt'

interstitial.js.txt (4 KB) (File Type Details)

place this in a folder called 'src' and delete '.txt'

02.11.2008 at 12:38PM PST, ID: 20869984

JaeWebb:

I cannot open the HTML attachment so I'm posting its code as a snippet instead.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

           
           
             <html>
 
    <!-- To deploy the Interstitial Ad solution, transfer the script and link
    tags from the header, the body tag's 'onLoad' statement, and the
    'INTERSTITIAL AD SECTION' to the page where the ad should appear. Next,
    make sure the 'interstitial.js' and the 'interstitial.css' files are
    referenced from the script and link tags, respectively. -->
    
	<script type="text/javascript" src="src/interstitial.js"></script>
	<link rel="stylesheet" type="text/css" href="src/interstitial.css" />
 
	<title>IA Test (HTML/External Scripts)</title>
 
</head>
 
<body onLoad="if (showAd) appear();">
 
	<div style="margin-top:100; margin-left:100;">
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
        </script>
    </div>
 
 
 	<!-- INTERSTITIAL AD SECTION -->
    <div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%;"> 
        <!-- This is the close button that appears over 
        generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
    	        
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   setTimeout('showHideButtonIfAdScheduled()', 1000 );
        }
        </script>
        
    </div> 
	<!-- END INTERSTITIAL AD -->
 
</body>
</html>

           
         

Open in New Window

02.12.2008 at 02:49AM PST, ID: 20873799

Rank: Guru

Lakio:

Im tested it on my pc and I see the problem and its not soo easy too fix.
Im going too look at it later today.

02.12.2008 at 03:02AM PST, ID: 20873847

Rank: Guru

Lakio:

if you can change one line in http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96
it will fix this.

document.write ('var TFSMFlash_WMODE="window";\n');
to
document.write ('var TFSMFlash_WMODE="transparent";\n');

02.12.2008 at 03:27AM PST, ID: 20873930

Rank: Guru

Lakio:

and if you dont then do this:

add an id too the static flash div

<div style="margin-top:100; margin-left:100;" id="flashadx">

and add this below the last last ad on the page ( lowerst in the HTML )

document.getElementById('floatingflash').innerHTML = document.getElementById('floatingflash').innerHTML.replace( /="window"/g, '="transparent"' )
document.getElementById('flashadx').innerHTML = document.getElementById('flashadx').innerHTML.replace( /="window"/g, '="transparent"' )

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:

           
           
             <html>
 
    <!-- To deploy the Interstitial Ad solution, transfer the script and link
    tags from the header, the body tag's 'onLoad' statement, and the
    'INTERSTITIAL AD SECTION' to the page where the ad should appear. Next,
    make sure the 'interstitial.js' and the 'interstitial.css' files are
    referenced from the script and link tags, respectively. -->
    
	<script type="text/javascript" src="src/interstitial.js"></script>
	<link rel="stylesheet" type="text/css" href="src/interstitial.css" />
 
	<title>IA Test (HTML/External Scripts)</title>
 
</head>
 
<body onLoad="if (showAd) appear();">
 
	<div style="margin-top:100; margin-left:100;" id="flashadx">
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
        </script>
    </div>
 
 
 	<!-- INTERSTITIAL AD SECTION -->
    <div id="floatingflash" style="top:-400px;left:-150px;margin-left:45%;"> 
        <!-- This is the close button that appears over 
        generated/visible ads -->
        <div id="hideButtonTab">
            <a id="hideButton" href="javascript:disappear();">Close [ X ]</a>
        </div>
    	        
        <!-- This is the link to the remote OAS ad tag -->
        <script type="text/javascript">
        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/IHC/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   //setTimeout('showHideButtonIfAdScheduled()', 1000 );
		   
		   // Fix for floating flash
		   document.getElementById('floatingflash').innerHTML = document.getElementById('floatingflash').innerHTML.replace( /="window"/g, '="transparent"' )
		   document.getElementById('flashadx').innerHTML = document.getElementById('flashadx').innerHTML.replace( /="window"/g, '="transparent"' )
        }
        </script>
        
    </div> 
	<!-- END INTERSTITIAL AD -->
 
</body>
</html>

           
         

Open in New Window

Accepted Solution

02.12.2008 at 05:31PM PST, ID: 20880968

JaeWebb:

Lakio, you're awesome! Thanks for your help.

I moved the 'fix' code into the external JS file, added some browser test logic since the problem didn't occur in IE, then I placed function where the 'fix' appeared, like so:

                       
                     if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/lawhome/@x96"></scr'+'ipt>');
		   
		   <!-- Wait one second after call to ad tag, then test size of floatingflash div -->
		   setTimeout('showHideButtonIfAdScheduled()', 1000 );
           <!-- If browser is not IE, replair overlapping flash issue -->
		   fixOverlapBugIfFirefox();
		}
        </script>

Open in New Window

Lakio

02.13.2008 at 02:19AM PST, ID: 20883012

Glad to help

20080236-EE-VQP-29 / EE_QW_2_20070628