IE showing hidden div under certain circumstances

views:

answers:

IE showing hidden div under certain circumstances

After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.

The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.

The problem: Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.

This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).

I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.

The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.

This only works if the position is set to absolute.

Edit: How did you position the tooltip when showing it:

I positioned the tooltip by changing the css values of "top" and "left".

box.css("left, e.pageX+1);
box.css("top", e.pageY+1);

Where 'e' is my event variable from:

mousemove(function(e){});

stan 2010-04-06 15:20:28

How did you positon the tooltip when showing it? I think that was the point for using the libraries so we may position it easily by the mouse pointer.

2010-04-06 16:11:03

I positioned the tooltip by changing the css values of "top" and "left". You can retrieve the mouse position by using the event variable that's being called in the function.mousemove(function(e){box.css("left", e.pageX+5);box.css("top", e.pageY+1);}

stan 2010-04-07 14:01:45

Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.

(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).

Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.

amphetamachine 2010-04-06 15:26:18

The problem is not and endless page but just the content of the div displaying at the end of it. When switching to another tooltip or div actually the browser might then crash. The div does not have any width but the table inside it is set to 100%.

2010-04-06 16:13:45

ansaurus

tags:

views:

answers:

IE showing hidden div under certain circumstances

related questions