Hello, Im having an issue wih a css tool tip script I came across. basically my issue is related to the z-index property. Even though my tooltips are set to z-index > 0.. on display they appear behind any absolutely positioned divs. If i set the absolutely positioned divs to z-index of -1 the tooltips stops displaying but only when a div is located adjacent... in fact I can not even get a hyperlink to work under the described conditions(although they work below they just appear behind neighboring divs)
Has anyone dealt with anything similar to this before? I would appreciate any insight on this.
Here is a full test page
Thanks in advance
MCP, .Net Solutions Development <%_%>
Has anyone dealt with anything similar to this before? I would appreciate any insight on this.
Here is a full test page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
<title>Page Title</title>
<style type="text/css">
.category{
font-size:medium;
background-color:silver;
width:25%;
z-index:0;
}
.catheader {
font-size:large;
background-color:gray;
}
.catsubheader {
font-size:large;
background-color:SlateGray;
}
.subsubheader {
font-size:large;
background-color:LightGrey;
}
#cat1{
position:absolute;
left:0;
top:67px;
}
#cat2{
position:absolute;
left:25%;
right:50%;
top:67px;
}
#cat3{
position:absolute;
left:50%;
right:25%;
top:67px;
}
#cat4{
position:absolute;
left:75%;
right:0;
top:67px;
}
/* ------- Bullets and Such ------------*/
ul{
margin-top:0em; margin-bottom:0em; margin-left:20px; margin-right:0em;
}
li{margin-left:0px;}
li.htm{list-style-image:url('icons/htm_small.png')}
li.xls{list-style-image:url('icons/xls_small.png')}
li.doc{list-style-image:url('icons/doc_small.png')}
li.ppt{list-style-image:url('icons/ppt_small.png')}
li.pdf{list-style-image:url('icons/pdf_small.png')}
/* ------------ Custom Tool Tips ---------*/
a {font-color:blue; text-decoration:underline;}
a.info{
position:relative;
z-index:24;
color:blue;
text-decoration:underline;}
a.info:hover{z-index:25; background-color:#ff0}
a.info span{display: none; text-decoration:none; !important}
a.info:hover span{
display:block;
z-index:100;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: left}
.footer{
font-size:small;
position:absolute;
left:0px;
bottom:0px;
}
</style>
</head>
<body style="margin:0,0,0,0; font-family:Georgia; z-index:-1;">
<img src="graduation.jpg" height="50" width="55" alt="Graduation Cap" style=" float:left;" />
<span style="font-size:xx-large; font-weight:bold;">Page Name</span>
<span style="font-size:small; float:right;">Tagline</span>
<br />
<hr />
<div id="cat1" class="category"><div id="head1" class="catheader">Training</div>
<ul>
<li id="cat1ligen1" class="htm">
<a class="info" href="#">Page
<span>Lots and Lots of Text
..................... ..................... ........||||||||||||||| ||||||||||||| ||||| |||||........... ............
</span>
</a>
</li>
<li id="cat1ligen2" class="htm">
<a class="info" href="#">link
<span>Lots and Lots of Text
..................... ..................... ........||||||||||||||| ||||||||||||| ||||| |||||........... ............
</span>
</a>
</li>
<li id="cat1ligen3" class="doc">
<a class="info" href="#">link
<span>Lots and Lots of Text
..................................................||||||||||||||||||||||||||||||||||||||.......................
</span>
</a>
</li>
<li id="cat1ligen4" class="ppt">powerpoint doc</li>
<li id="cat1ligen5" class="htm">web page</li>
<li id="cat1ligen6" class="ppt" title="ppt">powerpoint doc
</li>
</ul>
<div id="cat1subhead1" class="catsubheader">Sub Header</div>
<div id="cat1subsub1" class="subsubheader">Sub Sub Info</div>
<ul>
<li class="pdf">Product Sheet</li>
</ul>
</div>
<br />
<div id="cat2" class="category"><div id="head2" class="catheader">Product Info</div>
<div id="cat2subhead1" class="catsubheader"> Product Category 1</div>
<div id="cat2subsub1" class="subsubheader">Product Sub Category</div>
<ul>
<li class="htm">Stuff</li>
</ul>
</div>
<br />
<div id="cat3" class="category"> </div>
<br />
<div id="cat4" class="category"> </div>
<br />
<div id="footer" class="footer">
<hr />
<span style="float:left;">footer</span>
</div>
</body>
</html>Thanks in advance
MCP, .Net Solutions Development <%_%>