SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Bubbling Issues in IE
-
Apr 16, 2007, 13:42 #1
- Join Date
- Aug 2003
- Location
- Toronto
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Layer Event Passthrough
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.
- AAALast edited by alfred3x; Apr 17, 2007 at 09:04.
- A. Alfred Ayache
PHP/MySQL ZCE
-
Apr 17, 2007, 10:46 #2
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got any URL to show this?
-
Apr 17, 2007, 12:48 #3
- Join Date
- Aug 2003
- Location
- Toronto
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't right now, but I'm thinking it may help to set up a test version.
- A. Alfred Ayache
PHP/MySQL ZCE
-
Apr 18, 2007, 09:27 #4
- Join Date
- Aug 2003
- Location
- Toronto
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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- A. Alfred Ayache
PHP/MySQL ZCE
-
Apr 18, 2007, 11:51 #5
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I didn't see any rollovers on this page. And it seems to work fine in IE 7.
-
Apr 18, 2007, 12:08 #6
- Join Date
- Aug 2003
- Location
- Toronto
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code:/* 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*/
- AAA- A. Alfred Ayache
PHP/MySQL ZCE
-
Apr 18, 2007, 12:16 #7
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code:var scrollTop = xScrollTop(); var clientWidth = xClientWidth();
"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'.
Cross-Browser.com, Home of the X Library
-
Apr 18, 2007, 13:03 #8
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 " />",Cross-Browser.com, Home of the X Library
-
Apr 18, 2007, 13:06 #9
- Join Date
- Aug 2003
- Location
- Toronto
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, Mike!
In the function doCloak you have scrollTop and clientWidth as global variables
Then you mentioned it.
"javascript:" is typically only used in an "href"
you might be better off using conditional comments
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- A. Alfred Ayache
PHP/MySQL ZCE
-
Apr 18, 2007, 13:29 #10
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Cross-Browser.com, Home of the X Library
Bookmarks