overflow:auto and hover issues

[cows]

Hi all. I need to get this site up in the next few days so I don’t have a lot of time to research for myself how to fix this problem so I’m hoping for an easy answer from someone.

I’m also hoping that this problem is easy enough that I don’t need to post all the code for examination (though I’m fine to do that if people want)

I’ve got a list menu inside a box using overflow:auto

When hovering over an anchor in the list there should be a box which appears explaining the image which was just hovered over.

However, the hovering explanation box is clipped by the edge of the box using overflow:auto.

Any thoughts? Thanks

[cows]

oh yeah, I’m using firefox

[TheDoc]

Do you have a link?

Also, this:

> I need to get this site up in the next few days so I don’t have a lot of time to research for myself how to fix this problem so I’m hoping for an easy answer from someone.

…won’t exactly spring people to your help.

[HemZone]

Could you please, upload your code anywhere and share link pls so it would be better to understand your problem.

[cows]

Hi ya’ll. Okay sorry for being lazy about it. I’ve uploaded the website now (even though there’s still some content issues I need to deal with).

Sorry, don’t know what a shark link is (though I tried to google it briefly)The page in question is the “school” page which is here:
[http://visit-a-patient.webs.com/school.html](http://visit-a-patient.webs.com/school.html “visit-a-patient”)

The list of images on the right side are books. I want a pop-up explanation of those books on hover. You can see I’ve put the code there for the first image (I’ve not yet done so for all the other images as I want to work out the bug first and then change the styling; the pop-up box is red to make it easier to see)

When hovering over the image of the flash cards an explanation box appears, but it’s clipped within the box which uses overflow:auto .

Thanks for looking at my problem.

Here is the CSS for the image menu and pop-up

====================
.book_hover {

font-family: verdana, sans-serif;
width:200px;
height:230px;
margin:0px 0px;

}
.book_hover ul {

padding:0;
margin:0;
border:0;
list-style-type: none;

}
.book_hover ul li {

float:left;

width:180px;
height:236px;
border:2px solid #fff;
}
.book_hover ul li a, .book_hover ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:150px;
height:150px;
color:#000;
background:transparent;
}
.book_hover ul li a img, .book_hover ul li a:visited img {
border:0;
}

.book_hover ul li dl {
visibility:hidden;
position:absolute;
}

.book_hover dl {width:220px; padding:0 0 20px 0; background:transparent url(../sites/bottom.gif) no-repeat bottom left; height:auto;}

.book_hover dt {margin:0; padding:5px; font-size:1.4em; font-weight:bold; color:red; background:transparent url(../sites/top.gif) no-repeat top left; text-align:center;}

.book_hover dd {margin:0; padding:5px 15px; color:#000; font-size:1em; border:1px solid #000; border-width:0 1px; background:red; url(../sites/info.gif) no-repeat bottom right;}

.book_hover dd p {padding:0; margin:10px 0; line-height:1.5em;}

=================

And the HTML:

• 

  A series of 500 cards with a word on the front and a picture describing the meaning of that word on the back. The cards are also sorted into a “parts-of-speech” color coding system. Blues are nouns. Reds are verbs. Yellows are adjectives. Oranges are adverbes and greens are prepositions/conjunctions

[cows]

ohhh haha just noticed it’s not shark link, but you said share link. lol I’m so stupid sometimes.

[cows]

Oops, sorry, just realized the code didn’t post properly cause I didn’t use the code button. You guys probably get really bugged by that kind of thing, right?

Anyway, here it is again, the html

• 

  A series of 500 cards with a word on the front and a picture describing the meaning of that word on the back. The cards are also sorted into a “parts-of-speech” color coding system. Blues are nouns. Reds are verbs. Yellows are adjectives. Oranges are adverbes and greens are prepositions/conjunctions

[cows]

hmm it’s not working for me, even though I pasted in the slab of code then selected it all and pushed the “code” button. I dunno…

[HemZone]

I m sorry but your markup is bit messy. You can use this jQuery plugin instead of code.

Checkit out this example : http://jsfiddle.net/andrewwhitaker/tSHZS/

Just need to make simple customize as per your requirement.

[Author]

Posts