Hidden Elements Cause Page Overflow

Greetings everyone! This is my first post

I have a page where I have placed 'hover-based' context menus by means of conditionally invisible <span> tags at the end of my page.

The problem is that the content inside some of the context menus exceed the length of the content that is visible on the page. This leaves a blank area at the end of my page (thats where i have placed all those invisible span tags for my context menu). I want to get rid of this blank area

Any info is highly appreciated. Thanks!

place them in a div and position the div

Elements within the hidden div can also cause a page to run long with their overflow, even if the div is positioned.

If you code it like <div style="height:0;overflow:hidden;visibility;hidden;"> that should solve the problem.

Cheers, Kootenay

Use display instead of visibility ?

wouldn't it also then be "display:none" instead of "display:hidden" ... ?

Instead of using either of these, it might also work to just set the size of the div to 0px by 0px and then back to normal size in the hover state.

If it's 0px by 0px there is nothing to hover over to bring it to normal state. (Just the same as "display:none;")

Good point bogey.
I was under the impression a different element was the one triggering the event.

Is this what you want?

Hmm.. good point... I guess it'd be easier to say if we had some code to look at.

I think he means something like this example... "the content inside some of the context menus exceed the length of the content that is visible" to quote him word for word.

Adding a "float" would do the trick to I imagine.

Some code may help as well though...