invisible div taking up real estate...

[fdgsogc]

Hi,

I am listing 6 images. When the user mouses over the image, it disappears and text shows up in its place.

Here's how I do it.
1. Two tables wrapped in div tags.
2. First div tag is visible (the images).
3. Second div tag is hidden (the text shows up).
4. Using javascript to change visibility attribute based on mouseover and mouseout events.

Problem: The div tags mouse in and out correctly. However, the invisible div tag (item #3) is taking up real estate on the page even though it is invisible.

I have set the style for the invisible div tag to:

.rentalinfooff 
{
visibility: hidden;
position: relative;
top: -150px;
}\

Not helping though.

Any ideas?

 

[BillyRayPreachersSon]

Instead of "visibility: hidden", use "display:none".

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 

[cLFlaVA]

replace

visibility: hidden;

with

display: none;

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

You answered your own question. If I would make myself invisible and stand in the doorway to block your way, would you be able to walk through me just because I was invisible to you? It is the same in html. Visibility hides the element from view but does not take it away from the page. What does is the display property. Switching from visibility: visible; and visibility: hidden; to display: block; and display: none; will do the trick.

 

[Vragabond]

Wow, you people are just like hungry jackals waiting for new questions. At least I try to be funny in my replies.

 

[cLFlaVA]

LOL!

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]