Gaps in PhoneGap

PhoneGap doesn’t like my CSS. Or some of it, anyway.

My intent was simple: use the accelerometer to call a function that changes the image displayed on the screen. When the image failed to refresh, I went simpler: set “onmousedown” to run the displayImage() function that refreshes the image. Still no luck.

But when I deleted the CSS reference to the image’s class, everything worked splendidly. What gives?

Here’s the CSS I deleted:

.imageOverlay{
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
position: fixed;
z-index:1;

}

Somewhere in there lies the problem. Time to delete it all, and add it back, one suspicious line at a time.

EDIT: “position: fixed;” turns out to be a problematic line. So far, it seems OK if other overlapping images have a position attribute — but not the image that I’m replacing, using Javascript: document.getElementById(“adviceText”).src=texts[text];