943,169 Members | Top Members by Rank

Ad:
Aug 30th, 2010
0

css popup on mouseover not loading properly

Expand Post »
hello
am currently facing a problem with the popup which appears when I hover on a link: (see 1st attachment) while it should have been as shown at design time (2nd attachment img)

For those familiar with drupal, the part which is shown in 1st attachment is from the left sidebar (which ends where the popup is clipped), while the black part will consist of content. But currently the popup itself is not completely shown and if I move it more to the right, it disappears completely (whereby it goes in the content section (right black part) but playing with its z-index does nothing for the popup

Here is the css which I've used, but may be I missed something...if anyone could help

reference code from http://www.dynamicdrive.com/style/cs...-image-viewer/


.leftsidemenu {
width: 210px;
}

ul.leftmenucontent {
padding-left: 0;
text-align: center;
width: 210px;
}

ul.leftmenucontent li {
background-image: none;
margin: 0;
display: block;
padding-right: 45px;
margin: 22px 2px 22px 0; /*5px 2px 5px 0;*/
color: #999999;
font: 14px Arial, Helvetica, sans-serif;
}


ul.leftmenucontent li a {
display: block;
color: #999999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
position: relative;
}

ul.leftmenucontent li a:hover {
color: #ffffff;
border-top: 2px solid #9f9f9f;
border-bottom: 2px solid #9f9f9f;
display: block;
}


ul.leftmenucontent li a span {
position: absolute;
left: -1000px;
visibility: hidden;
text-decoration: none;
}

ul.leftmenucontent li a span img {
border-width: 0;
padding: 2px;
}

ul.leftmenucontent li a:hover span {
visibility: visible;
left: 60px;
text-decoration: none;
top: -15px;
}

Also just for info: my left sidebar is 210px, but the image in the popup is 250px, and I have to push it to the right by 210px to get the effect wanted, but in doing so it disappears completely, could this also be a problem, that is the image is going out of the sidebar?
Attached Thumbnails
Click image for larger version

Name:	Untitled-3.png
Views:	44
Size:	38.0 KB
ID:	16971   Click image for larger version

Name:	Untitled-4.png
Views:	361
Size:	91.4 KB
ID:	16972  
Last edited by lordrt; Aug 30th, 2010 at 3:16 am.
Similar Threads
Reputation Points: 30
Solved Threads: 29
Posting Whiz
lordrt is offline Offline
335 posts
since Jul 2010
Oct 15th, 2010
0
Re: css popup on mouseover not loading properly
in the end did not proceed as shown here
Reputation Points: 30
Solved Threads: 29
Posting Whiz
lordrt is offline Offline
335 posts
since Jul 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: how to upload website
Next Thread in HTML and CSS Forum Timeline: image in title tag and adress bar





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC