Bubbling Issues in IE

[alfred3x]

I have a terrific signup/signin setup which works great in FF but is giving me grief in IE (two problems). Here's how it works:

On whatever page you are you can click sign in or sign up. A div with a semitransparent png background appears with the appropriate dialog (div) on top.

The first problem I have is that the div with the png background allows interaction with the page below it (only in IE). So roll overs work, and you can click on links. This is not desirable. How can I prevent this from happening?

I tried setting the div's mouseover and mouseout events to stopBubbling, but that didn't help.

The second problem is that the labels on the first dialog (signup) aren't showing up. They're the same code as the second dialog (signin).

I'm confused. Any help appreciated.

- AAA

[Pepejeria]

Got any URL to show this?

[alfred3x]

I don't right now, but I'm thinking it may help to set up a test version.

[alfred3x]

OK, I now have a URL to demo:

http://sandbox.lastbyte.ca/

In IE, click on the Sign In link in the upper right, and note that rolling over the links (3 of them: Sign Up/In, and Lorem ipsum dollor on the left) allows the links to change colour. And, of course, you can click on the links, which is a no-no.

Ideally, clicking on the cloak should make it go away. But it's not catching the event.

Finally, the sign up dialog isn't showing the labels, though the sign in one is. I believe this has to do with the filter hack in includes/theme/iestyles.css to get the PNG alpha transparency to work in IE.

OK, that's it for now.

Thanks for your help!

- AAA

[Pepejeria]

I didn't see any rollovers on this page. And it seems to work fine in IE 7.

[alfred3x]

OK, thanks for letting me know it works in IE 7. IE 6 however, is still an issue.

All these problems are directly related to the filter hack in includes/theme/iestyles.css:

/* keep these 2 together or hack doesn't work for ie5*/
* html #cloak {
background:#000;/* for ie5*/
voice-family: "\"}\""; voice-family:inherit;
}
* html #cloak{/* for ie5.5 and 6*/        
    background:transparent; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grafx/s50.png', sizingMethod='scale');
}
/* end hack*/

Thanks for your help,
- AAA

[MikeFoster]

Hi alfred3x,

I don't have a solution for you, but I thought I'd point out something which could cause subtle problems later.

In the function doCloak you have scrollTop and clientWidth as global variables, that is... window.scrollTop and window.clientWidth. Make them local to their function by declaring them with the 'var' keyword - as well as any other variables that are intended to only have function (local) scope.

var scrollTop = xScrollTop();
var clientWidth = xClientWidth();

Also...
"javascript:" is typically only used in an "href". It is not needed in an event attribute handler. It declares a protocol such as "http:" or "ftp:" and only makes sense as part of a URL.

One more...
As Paul O'B mentioned, you might be better off using conditional comments instead of the CSS hacks. Seems like a lot of trouble just to use 'png' .

[MikeFoster]

Out of curiosity I modified my page grey demo for a little test. In IE6 links do not "bleed through", and I am only using a semi-transparent div - no image. The dialog boxes don't have to be children of the cloak - they only have to be positioned on top of it.

Also, there seems to be some malformed html in either the signup or signin elements' children.

I see you've went to an HTML doctype. Good. Now you can get rid of all those yucky " />",

[alfred3x]

Thanks, Mike!

In the function doCloak you have scrollTop and clientWidth as global variables

Good catch. I fixed that. You know, I was just wondering yesterday about var. And today I watched an amazing video series by Douglas Crockford (inventor of JSON and Yahoo's Chief JavaScript Architect), in which he went over the difference between using and not using var.

Then you mentioned it.

"javascript:" is typically only used in an "href"

Yep. Inherited code. Say no more.

you might be better off using conditional comments

In fact, I *am* using conditional comments in index.php around line 11.

But I had an epiphany. Let me bounce it off you guys:

At first I tried using an opaque div for the cloak. Then I found that all children would inherit the opacity, and that wouldn't fly. Which led me to the alpha transparency png and that infernal filter and its litany of side effects.

Let's revisit the opaque div, but this time make the dialog divs separate (not children of cloak), so they don't inherit the opacity, and we position them as and when they're needed. Thereby neatly sidestepping the filter and associated problems.

Any thoughts? Issues?

(Oops, just saw your subsequent post... Hey, great minds think alike. )

Thanks again for your help,
- AAA

[MikeFoster]