Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Flash taking precedence in IE7, Accursed IE >_<

views
     
TSsilverhawk
post Jun 5 2007, 08:56 PM, updated 17y ago

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


Ok guys, I could use some help here. Been trying to figure out this problem for the entire day, and I've pretty much tried and exhausted my googling capabilities tongue.gif

Take a look at the following page:
http://simpleet.com/projects/plusxpert/index.html

Notice that there is a flash banner below the navigation. The navigation expands with a 2nd level dropdown, and that dropdown overlaps the flash. I've solved it using z-indexes, so it works in firefox and opera. In IE7, the dropdown appears infront of the flash, but you can't select it. The mouse will focus on the flash instead, and the navigation is lost. According to my partner, it works in IE6... can you guys confirm that?

Right now I'm using the swfobject method to add the flash. I've already tried the following
  • Object only method (my initial attempt)
  • Object + embed (when it didn't work in IE7)
  • Embed only (when object+embed didn't work)

I've also tried using a flash that is not "clickable", so that isn't the problem either.

If any of you know how to solve this problem, please enlighten me... its driving me nuts! Oh, if you take a look at the CSS, let me first apologise for the mess it is in tongue.gif
callmepaper
post Jun 5 2007, 11:09 PM

书到用时方恨少
******
Senior Member
1,319 posts

Joined: Dec 2005
From: somewhere i belong
QUOTE(silverhawk @ Jun 5 2007, 08:56 PM)
Ok guys, I could use some help here. Been trying to figure out this problem for the entire day, and I've pretty much tried and exhausted my googling capabilities tongue.gif

Take a look at the following page:
http://simpleet.com/projects/plusxpert/index.html

Notice that there is a flash banner below the navigation. The navigation expands with a 2nd level dropdown, and that dropdown overlaps the flash. I've solved it using z-indexes, so it works in firefox and opera. In IE7, the dropdown appears infront of the flash, but you can't select it. The mouse will focus on the flash instead, and the navigation is lost. According to my partner, it works in IE6... can you guys confirm that?

Right now I'm using the swfobject method to add the flash. I've already tried the following

  • Object only method (my initial attempt)
  • Object + embed (when it didn't work in IE7)
  • Embed only (when object+embed didn't work)

I've also tried using a flash that is not "clickable", so that isn't the problem either.

If any of you know how to solve this problem, please enlighten me... its driving me nuts! Oh, if you take a look at the CSS, let me first apologise for the mess it is in tongue.gif
*
hi there, i'm not a flash programmer, so, i can't help you much in terms of coding. have you think it could be javascript? i give you an example:

http://www.hla.com.my/

goto this website, there's also a javascript dropdown, click on the second dropdown menu (About HLA), there're five menu items underneath and they span over the flash object. the last two menu items are clickable. i had tried this under ie7 and it's working fine. you may want to download the javascript and try it yourself. i'm sure you know the way to download the javascript files. good luck.
kamen_rider
post Jun 6 2007, 01:34 AM

Getting Started
**
Junior Member
50 posts

Joined: Jun 2007
From: N3 56.372 E103 21.749


QUOTE(silverhawk @ Jun 5 2007, 08:56 PM)
Ok guys, I could use some help here. Been trying to figure out this problem for the entire day, and I've pretty much tried and exhausted my googling capabilities tongue.gif

Take a look at the following page:
http://simpleet.com/projects/plusxpert/index.html

Notice that there is a flash banner below the navigation. The navigation expands with a 2nd level dropdown, and that dropdown overlaps the flash. I've solved it using z-indexes, so it works in firefox and opera. In IE7, the dropdown appears infront of the flash, but you can't select it. The mouse will focus on the flash instead, and the navigation is lost. According to my partner, it works in IE6... can you guys confirm that?

Right now I'm using the swfobject method to add the flash. I've already tried the following


  • Object only method (my initial attempt)

  • Object + embed (when it didn't work in IE7)

  • Embed only (when object+embed didn't work)


I've also tried using a flash that is not "clickable", so that isn't the problem either.

If any of you know how to solve this problem, please enlighten me... its driving me nuts! Oh, if you take a look at the CSS, let me first apologise for the mess it is in tongue.gif
*
Not working on my IE6. When I hover the on the menu, there is no dropdown at all.

I got this error when using IE6:
Line: 15
Char: 37
Error: Object doesn't support this property or method
Code: 0
Url: http://simpleet.com/projects/plusxpert/index.html


On firefox, it works fine.


This post has been edited by kamen_rider: Jun 6 2007, 01:36 AM
nyem
post Jun 6 2007, 03:33 AM

Enthusiast
*****
Senior Member
749 posts

Joined: Jan 2007


Actually it works on IE7 if you quickly move your mouse over text elements, but the menu quickly disappear whenever the mouse is over empty spaces in the menu boxes.

TSsilverhawk
post Jun 6 2007, 01:24 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


QUOTE(kamen_rider @ Jun 6 2007, 01:34 AM)
Not working on my IE6. When I hover the on the menu, there is no dropdown at all.

I got this error when using IE6:
Line: 15
Char: 37
Error: Object doesn't support this property or method
Code: 0
Url: http://simpleet.com/projects/plusxpert/index.html
On firefox, it works fine.
*
Fixed it smile.gif

QUOTE(nyem @ Jun 6 2007, 03:33 AM)
Actually it works on IE7 if you quickly move your mouse over text elements, but the menu quickly disappear whenever the mouse is over empty spaces in the menu boxes.
*
Well, I can't expect people to move so quickly right? tongue.gif
Any idea why its behaving this way?
nyem
post Jun 6 2007, 03:09 PM

Enthusiast
*****
Senior Member
749 posts

Joined: Jan 2007


Could not locate your css hacks for IE6 & IE7 as in
CODE

[bad html removed][if IE 6]>
<link title="IE6 Hacks"
      rel="stylesheet"
      type="text/css"
      href="hacks-ie6.css"
      media="screen" />
<![endif]-->
[bad html removed][if IE 7]>
<link title="IE7 Hacks"
      rel="stylesheet"
      type="text/css"
      href="hacks-ie7.css"
      media="screen" />
<![endif]-->


are they uploaded as well?


TSsilverhawk
post Jun 6 2007, 04:13 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


QUOTE(nyem @ Jun 6 2007, 03:09 PM)
Could not locate your css hacks for IE6 & IE7 as in
CODE

[bad html removed][if IE 6]>
<link title="IE6 Hacks"
      rel="stylesheet"
      type="text/css"
      href="hacks-ie6.css"
      media="screen" />
<![endif]-->
[bad html removed][if IE 7]>
<link title="IE7 Hacks"
      rel="stylesheet"
      type="text/css"
      href="hacks-ie7.css"
      media="screen" />
<![endif]-->


are they uploaded as well?
*
Nope, they don't exist yet. I only include the hacks once I've found a solution, so I can isolate them. The code is my own standard xhtml development template, if I don't need to use hacks, I remove it before going live.

Since I've found no solution yet, the hack files do not exist.
crynobone
post Jun 6 2007, 07:24 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth


Not really familiar with embed but I highly believe using object with <param name="wmode" value="transparent"></param> can solve the problem.



TSsilverhawk
post Jun 6 2007, 08:03 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


QUOTE(crynobone @ Jun 6 2007, 07:24 PM)
Not really familiar with embed but I highly believe using object with <param name="wmode" value="transparent"></param> can solve the problem.
*
That was already tried, it works in firefox and opera because the flash is set to windowless mode via wmode="transparent". I didn't mention it cause I thought it would have been implied already.
crynobone
post Jun 6 2007, 10:53 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth


I don't have the time to go through the javascript process that occur at the page (firebug not that powerful) but it might have to do with event handler process which might create a conflict with the flash.

What I can think at the moment (based on my experience), is to create an invisible layer (use background:transparent) just directly covering the flash (use position:absolute,top,left,width,height).
TSsilverhawk
post Jun 7 2007, 01:18 AM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


The javascript on the page isn't really much. Its just to help apply styles to a child's parent and overcome some shortcomings of IE6. Nonetheless, I'll try what you suggested to see if it works.
nyem
post Jun 7 2007, 01:46 AM

Enthusiast
*****
Senior Member
749 posts

Joined: Jan 2007


I'd say just hide the flash whenever the drop-down menu is active hmm.gif
TSsilverhawk
post Jun 7 2007, 12:19 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


QUOTE(nyem @ Jun 7 2007, 01:46 AM)
I'd say just hide the flash whenever the drop-down menu is active  hmm.gif
*
The client wouldn't like that laugh.gif
nyem
post Jun 7 2007, 04:01 PM

Enthusiast
*****
Senior Member
749 posts

Joined: Jan 2007


Adobe.com has similar drop-down menu over flash movie and I think they're using background images as a layer above the flash movie to prevent flash from fighting for control.
snow
post Jun 8 2007, 11:35 AM

Enthusiast
*****
Senior Member
785 posts

Joined: Jan 2003




crynobone
post Jun 9 2007, 09:17 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth


I believe the flash.js only useful when you want to force IE to play Flash without prompting yellow alert.

Silverhawk, I know it hard for you to share with us the source code of your working project but how about a simple POC (Prove of Concept) files that we can download and debug. A dummy navigation and a dummy flash would do fine with javascript file used for both action.
TSsilverhawk
post Jun 9 2007, 10:59 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


QUOTE(crynobone @ Jun 9 2007, 09:17 PM)
Silverhawk, I know it hard for you to share with us the source code of your working project but how about a simple POC (Prove of Concept) files that we can download and debug. A dummy navigation and a dummy flash would do fine with javascript file used for both action.
*
What you see in the link provided, is what I've done. The source code is all there. I'm hiding nothing smile.gif I'll see if I have time to create several demo files for you guys to test it out.
snow
post Jun 9 2007, 11:05 PM

Enthusiast
*****
Senior Member
785 posts

Joined: Jan 2003



My code is working in IE7. I didn't test in other browsers.

Adding
<param name="wmode" value="opaque">
should work.
TSsilverhawk
post Jun 9 2007, 11:50 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


Stripped the html and css of the non necessary parts

http://simpleet.com/projects/plusxpert/test.html
http://simpleet.com/projects/plusxpert/test.css

The only javascript you really need is the "swfobject.js" file, you may remove the rest. Its only purpose is for styling and allowing the menu to work in IE6 since IE6 doesn't support the :hover pseudo-class on list elements.
crynobone
post Jun 10 2007, 12:00 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth


I found out something interesting, apparently the script failed in IE not because of Flash but use of padding, margin and border in your css. IE assume your move out of navigation even if you mouse in the padding area or border area.

http://www.chronosight.net/temp/test.html

Try sticking at the hyperlink text and you can hover over flash.

I create a invisible layer above billboard div.
http://www.chronosight.net/temp/nav.js

Remove padding and border.
http://www.chronosight.net/temp/test.css

2 Pages  1 2 >Top
 

Change to:
| Lo-Fi Version
0.0216sec    0.35    5 queries    GZIP Disabled
Time is now: 29th March 2024 - 10:32 PM