Mouseover layer positioning problem within CSS frames
within a top,left & main frame/div - I've placed a grid table. When mouse is placed over link in a table cell, a description layer drops down. But the positioning of the description layer instead of popping right below the text, it pops way off. I think its picking left margin of left css frame & top it starts from the end of the table. If I use relative position, it moves the table to the size of the description layer.
could someone help me please?
here's the CSS
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-size: 1em;
}
body, p, td, ol, ul, dl, dt, dd, form { color: #000000; font-size: 0.9em; font-family: Verdana, Arial,Helvetica, sans-serif; text-decoration: none }
.back2top a {
font-weight:bold;
font-size: 0.8em;
float: right;
}
h1 {
font-size: 1.3em;
color: #3044b5;
font-weight: bold;
}
#framecontentLeft, #framecontentTop{
position: absolute;
top: 0;
left: 0;
width: 180px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}
#framecontentTop{
left: 180px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 40px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}
#maincontent{
position: fixed;
left: 180px; /*Set left value to WidthOfLeftFrameDiv*/
top: 40px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
margin-top: 0px;
}
* html body{ /*IE6 hack*/
padding: 40px 0 0 180px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}
.description_layer {
display:none;
position:absolute;
border-style: solid;
border-width: 1px;
border-color: #666666;
background-color: #ffffff;
padding: 5px;
left-margin:0px;
width: auto;
white-space: normal;
Overflow: hidden;
width: 99%;
max-width: 200px;
min-width: 150px;
clear: all;
width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
> 205 ? "200px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 100 ? "152px" : "99.7%"));
}
----html code
<div id="maincontent">
<div class="innertube">
<div id="bagrid" class="glidecontentwrapper">
<!-- Page 1 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="sortable" id="sortable" dwcopytype="CopyTableCell">
<tr>
<th class="unsortable">Stage</th>
<th class="unsortable">Tier</th>
<th class="unsortable">Accum Value</th>
<th class="unsortable">Payer Type</th>
<th class="unsortable">Payer ID</th>
</tr>
<tr>
<td><a
onmouseover="ShowContent('1'); return true;"
onmouseout="HideContent('1'); return true;"
href="javascript:ShowContent('1')">DED</a> <div
id="1"
class="description_layer">Deductible</div></td>
<td>SACC-I</td>
<td>Dollar</td>
<td>LS</td>
<td>abcdefghijklmn1218</td>
</tr>
<tr>
<td><a
onmouseover="ShowContent('2'); return true;"
onmouseout="HideContent('2'); return true;"
href="javascript:ShowContent('2')">OOP</a> <div
id="2"
class="description_layer">OOP</div></td>
<td>MACC-I</td>
<td>Daysdollar</td>
<td>CL</td>
<td> </td>
</tr>
<tr>
<td><a
onmouseover="ShowContent('3'); return true;"
onmouseout="HideContent('3'); return true;"
href="javascript:ShowContent('3')">CAP</a> <div
id="3"
class="description_layer">CAP</div></td>
<td>PACC-I</td>
<td>DS</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><a
onmouseover="ShowContent('4'); return true;"
onmouseout="HideContent('4'); return true;"
href="javascript:ShowContent('4')">LTC</a> <div
id="4"
class="description_layer">Lifetime Cap</div></td>
<td>SACC-F</td>
<td>Fill</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><a
onmouseover="ShowContent('5'); return true;"
onmouseout="HideContent('5'); return true;"
href="javascript:ShowContent('5')">RXCAP</a> <div
id="5"
class="description_layer">Drug Specific Cap</div></td>
<td>MACC-F</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><a
onmouseover="ShowContent('6'); return true;"
onmouseout="HideContent('6'); return true;"
href="javascript:ShowContent('6')">Troop</a> <div
id="6"
class="description_layer">True Out of Pocket - Medicare Only</div></td>
<td><p>PACC-F</p></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>DS</td>
<td>SACC-EM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>AP</td>
<td>MACC-EM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>APR</td>
<td>PACC-EM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SA</td>
<td>SACC-NEM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SASUB</td>
<td>MACC-NEM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SAEXCPT</td>
<td>PACC-NEM</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
</div>
CSS Codes
Reply With Quote
Originally Posted by Medyman
Bookmarks