You are currently browsing the category archive for the ‘z-index’ category.

I came across an interesting problem the other day. I was developing a way to have error dialog for our web application regardless of the web browser. I did not want to use the JavaScript alert message box. I could not use the IE Modal dialog. So I decided to display the error message in a DIV tag that would be centered on the screen and only made visible when there was an error. Then I thought, wouldn’t it be cool to be able to move the error dialog around the screen, in case it was covering up the form element that had a problem. I found dom-drag.js to be quite cool andListBox Example very helpful.

To make the DIV tag overlay the existing page, I needed to set the Z-index of the DIV at a higher level then anything else on the page. I soon found that no matter how hard you tried, all DropDownList boxes and List boxes would show through the error dialog.

After some research, I soon found that this is an issue with Internet Explorer and wasn’t much I could do about it. It is because DropDownList boxes and List boxes are considered a windowed component in the browser and regardless the z-index you assign these components or the DIV that contains them, they will always float to the top. This issue is resolved in IE7, but the idea of making all customers upgrade to IE7 was not acceptable.

Read the rest of this entry »


Blogs I Follow