SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Pure CSS tooltips, can't get it working in IE

    Using this site, I'm trying to use these to display a quick description for my external links section. It works great in Firefox, displays in Opera but won't go away when I move the mouse away and won't work at all in IE. Since all browsers work fine with it on madaboutstyle I guess I'm missing something really stupid but for the life of me I can't figure out what. I even tried copy-pasting the CSS and anchor but it still wouldn't work

    Here's my code
    Code:
     # css
     body {
     	background: #fff url( img/background.gif ) repeat;
     	color: #808080;
     	font: 12px Tahoma, Arial, sans-serif;
     	margin: 0;
     	padding: 0;
     }
     
     a {
     	color: #808080;
     	text-decoration: none;
     }
     
     a.external {
     	position: relative;
     	color: #808080;
     	text-decoration: none;
     	z-index: 24;
     }
     
     a.external span { display: none; }
     
     a.external:hover { z-index: 25; }
     
     a.external:hover span {
     	display: block;
     	position:absolute;
     	top: 1.5em;
     	left: -2em;
     	padding: 1em;
     	border: 2px #ac83ff solid;
     	background: white;
     	-moz-border-radius-bottomleft: 0px;
     	-moz-border-radius-bottomright: 10px;
     	-moz-border-radius-topleft: 10px;
     	-moz-border-radius-topright: 0px;
     	-moz-opacity: .77;
     }
     
     # html
     <div id="right">
     	<h2>LINKS</h2>
     	<ul id="links">
     		<li><a href="#">Home</a></li>
     		<li><a href="#">Something</a></li>
     		<li><a href="#">Something else</a></li>
     		<li><a href="#">More stuff</a></li>
     		<li style="padding-top: 2em;"><a href="http://www.toniallen.com" class="external">
     			Toni Allen
     			<span>Test</span>
     		</a></li>
     		<li><a href="http://www.platinum-central.com" class="external">Gavin Benda</a></li>
     		<li><a href="http://www.frozentoast.com" class="external">Andy Whats-his-name</a></li>
     	</ul>
     </div>
    Any ideas on how I could get this to work would be great

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE won't show the tooltips unless you change something on a: hover as well.

    Opera doesn't like the z-indexes for some reason.

    Try this instead:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
     body {
      background: #fff url( img/background.gif ) repeat;
      color: #808080;
      font: 12px Tahoma, Arial, sans-serif;
      margin: 0;
      padding: 0;
     }
     
     a {
      color: #808080;
      text-decoration: none;
     }
     
     a.external {
     position:relative; 
     color: #808080;
      text-decoration: none;
     }
     
     a.external span { display: none;  }
     
     a.external:hover { background:#fffffc;z-index:100 }
     a.external:hover span {
      display: block;
      position:absolute;
      top: 1.5em;
      left: -2em;
     padding: 1em;
      border: 2px #ac83ff solid;
      background: white;
      -moz-border-radius-bottomleft: 0px;
      -moz-border-radius-bottomright: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 0px;
      -moz-opacity: .77;
     }
    </style>
    </head>
    <body>
     <div id="right">
      <h2>LINKS</h2>
      <ul id="links">
       <li><a href="#">Home</a></li>
       <li><a href="#">Something</a></li>
       <li><a href="#">Something else</a></li>
       <li><a href="#">More stuff</a></li>
       <li style="padding-top: 2em;"><a href="http://www.toniallen.com" class="external">
    	Toni Allen
    	<span>Test</span>
       </a></li>
       <li><a href="http://www.platinum-central.com" class="external">Gavin Benda</a></li>
       <li><a href="http://www.frozentoast.com" class="external">Andy Whats-his-name</a></li>
      </ul>
     </div>
     
    </body>
    </html>
    Paul

  3. #3
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Thanks Paul All the sites I saw it running on had a background for a:hover but the never actually mentioned that it was necessary (that I could see)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •