Android Browser unable to click some links

This is my first of likely many posts so hello to all!

First-off, I debated if I should put this in the javascript, css, or html section. I suspect the problem has more to do with css hence my posting here.

Secondly, I’m doing web development and following (or trying to follow) the [URL=”http://www.lukew.com/ff/entry.asp?933″]mobile-first[/URL] philosophy.

[B]OK here’s the issue:[/B]
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: [URL=”http://www.getdesign.ca/problem1.htm”]http://www.getdesign.ca/problem1.htm[/URL]

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.

[B]How the code works:[/B]
I’m using my own code and not a pre-made lightbox. I basically have absolute positioned divs in the center of page with css display set to “none”. When you click a link, javascript switches them to “block”. When you click to close the window, javascript sets it back to “none”.

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 (80×80 pixels)

If I click near the bottom “close” link like a madman, it works maybe 1 out of 50 times.

[B]Compatibility[/B]
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).

[B]More about the code:[/B]
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 [B]line 143[/B] of the get.css file. The other styles you can *probably* ignore.

Any help or even moral support would be appreciated greatly ?.

Also in #CSS _↴