You are currently browsing the category archive for the ‘CSS’ 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 »

In the past few days I have learned that with Atlas, it makes a difference if you put your CSS style information in a class in an external CSS document or code it inline in the HTML element.

I had been using an Atlas UpdatePanel wrapper around a TreeView server control all inside a DIV tag. The DIV tag was using a CSS class to set the width, height and overflow styles. Durring testing, I noticed that when the tree expanded and the scroll bars apeared, every click of a node in the tree made scrolled the content back to the top of the tree. I had done a similar Atlas/TreeView in another page and it worked just fine. After some further debugging and code comparison line by line, the difference was that in my working example the CSS information was “in-line” with the DIV tag, but my recent code put the CSS style in an external class. So I moved the style from the class to “in-line” and it began to work just fine.

I am not sure if this is another IE bug, CSS bug or an Atlas bug. Either way, quite interesting and thought I would share it.

Also see my post in this thread:
http://forums.asp.net/2/1268514/ShowThread.aspx



Update
:

TreePopUpOverlay

It appears that the CSS can be inline or in external CSS file, it makes no difference, but the real issue was if the class with overflow=auto is inside or outside the Atlas UpdatePannel. IF you have a DIV with a CSS style setting overflow=auto inside the UpdatePannel, every click within that div will set the scroll to the top. IF you have put that DIV right outside the UpdatePannel, then it should work fine.This also goes for any parent/nested UpdatePanels. So, if the UpdatePannel I just refrenced in the last paragraph were nested inside another UpdatePanel, or I at a later date put that UpdatePannel inside another UpdatePanel, it would “break” the proper scrolling function.

So to produce the popup dialog on the right, and have the red X and the [Close] button work in an UpdatePannel, instead of wrapping everything inside another UpdatePannel, I would have to have one UpdatePannel for the red X close button and one UpdatePannel for the [Close] button at the bottom. See code image below.

treepopupoverlay.txt