(I posted this yesterday and I was informed it needed to be approved by a monitor, but it's been about 16 hours now so I'm re-posting)
This is my first of likely many posts so hello to all!
Secondly, I'm doing web development and following (or trying to follow) the mobile-first philosophy.
OK here's the issue:
I'm currently creating a site that uses a lightbox-like pop-up window (or faux-window) to display content. The problem comes with "closing" the window...
Here's the site: http://www.getdesign.ca/problem1.htm
On a desktop, everything works fine with every browser (except ie6 and 7 but that's another problem I can work out on my own). On my Android, I cannot easily close this window.
How the code works:
It should be possible to close it by clicking the "X" in the top right, the "close" link at the bottom, and by clicking anywhere outside this window. On Android, it is possible to close the window under the following circumstances:
If I don't scroll at all, and click the "X" in the top right, it sometimes works.
If I click below the "X" enough so that I'm clicking closer to "about", it works. This has something to do with the fact that I made the clickable area of the "X" much larger than the "X" itself (80x80 pixels)
If I click near the bottom "close" link like a madman, it works maybe 1 out of 50 times.
Like I said before, no problem on the desktop.
On my Android (Motorola Milestone) I have tested this on the Android 2.2 native browser, as well as Dolphin HD (same problem) and Opera Mobile (works fine, no problem).
More about the code:
If you look at the code it should be pretty self explanatory... but if you're having trouble understanding what I'm doing...
div id="contentBackground" <-- this creates a dark background
div id="about" class="contentWindow" <-- this creates a box that helps center the next divs...
div class="contentWrap" <-- heavily styles and sets the size of the faux-window
div class="closeWindow" <-- creates "X" in top right area
a class="closeText" <-- just the "close" text at the bottom
In the css these styles are grouped together starting on line 143 of the get.css file. The other styles you can probably ignore.
Any help or even moral support would be appreciated greatly .