Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Aug 2010
    Posts
    2
    Member #
    23298
    Hey there, I'm having trouble getting a CSS description tooltip to display over other images on the page.

    Here's my HTML:

    Code:
    <div id="Layer2"><a href="Images/Shirts/Alohatest.png"><center><img src="Images/Shirts/Alohatest.png" alt="" width="100px" height="100px" border="0" /></center></a>
    <center><a class=info href="#">Aloha Shirt #1<span>A shirt fit for Zeus himself</span></a>
    </center></div>
    Here's the CSS:

    Code:
    .container a img {border: 1px solid #ffffff;}
    .container a:hover img {border: 1px solid #0000ff;z-index:2}
    
    center {	font-family: Arial, Helvetica, sans-serif;}
    
    a.info{
        position:relative;
        z-index:98; background-color:#ccc;
        color:#000;
        text-decoration:none}
     
    a.info:hover{z-index:99; background-color:#ff0}
     
    a.info span{display: none; z-index:0}
     
    a.info:hover span{ 
        display:block;
        position:absolute;
        top:2em; left:2em; width:15em;
        border:1px solid #0cf;
        background-color:#cff; color:#000;
        text-align: center}
    
    #Layer2 {	border:none;	position:absolute;	width:110px;	height:110px;	z-index:2;	left: 20px;		top: 20px;}
    There's no other miscellanous z-index's on the page or the CSS that would interfere with the description's, and it's the highest index on the page.

    Any help would be greatly appreciated.

  2.  

  3. #2
    Member spokanewebguy's Avatar
    Join Date
    Aug 2010
    Location
    Spokane
    Posts
    68
    Member #
    23273
    Liked
    1 times
    which script are you using? A url to the page would be helpful

  4. #3
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    I doubt this is the case but you need to make sure to end all of your CSS styles with an ;.

    You have several that are missing. Here is one example:

    a.info span{display: none; z-index:0}

    You need to add the ; after the 0 at the end and just before the }

    So it would read like this:

    a.info span{display: none; z-index:0;}

  5. #4
    Junior Member
    Join Date
    Aug 2010
    Posts
    2
    Member #
    23298
    Thanks for the point-out I didn't realize the last property had to have a semicolon, I'll keep that in mind.

    What script am I using? XHTML 1.0 Transitional and CSS. My newest method involves fancifying the CSS tooltip but it still doesn't want to display over other images on the page. All the images are placed within Layers just like the one I have in the first post except with changed left and top coordinates.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com