I attached two photos, the first shows the "desktop" of the web application I am working on, some of the icons that you see open dialog boxes consisting of <div/> containing <iframe/> , but so far on a regular PC it all works correctly, on the iPad it seems that there is a problem with the z-index of some elements, as shown in the second figure.
The small red rounds with the number inside are defined as follows:
.countComunicazioni { position: relative; background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center; height: 35px; width: 35px; color: #FFF; top: -105px; left: 120px; z-index: 0; font-weight: bold; display: none; } .countComunicazioni p { margin-top: -5px; padding-top: 10px; }
The markup is the <div class="countComunicazioni"/> tag and the <p/> inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top, even if they have z-index == 0, and the dialogs have z-index> 1000.
According to this error message ( http://code.google.com/p/chromium/issues/detail?id=144518 ), it seems that this change is intended, even if I bet that it will break many layouts, and not only ours.
This problem was not present in previous versions of Google Chrome and was not present in Firefox V15 or Internet Explorer V9, where all problems had problems.
How to solve this problem? I'm not a CSS expert, so I have to admit that I have tried a little, if anything, so far ... And also, who is “right” here? Is our markup wrong, or is the problem with the new google chrome rendering strategy?
EDIT
It seems that I was able to solve the problem shown in two photos: all the dialogs created from my web application are placed inside the <div/> with position:fixed located at the very top of the body, now I tried to move the div to the very bottom of the page , and now the layout is correct.
However, there is another problem: when you open a modal dialog, an opaque layer is actually created above it, which must be created between the dialog and the content below, see the new screenshot.
How to solve this problem? Do we need to modify our javascript or jQuery ui problem itself?