Log in

View Full Version : Mouseover layer positioning problem within CSS frames


balushahi
03-12-2008, 03:05 PM
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. :mad:

could someone help me please :D ?

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>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>DS</td>
<td>SACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>AP</td>
<td>MACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>APR</td>
<td>PACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SA</td>
<td>SACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SASUB</td>
<td>MACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SAEXCPT</td>
<td>PACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<div class="clear"></div>
</div>

</div>
</div>
boogyman
03-12-2008, 03:17 PM
welcome to the DD Forums, please review our Posting Policies (http://dynamicdrive.com/forums/showthread.php?t=24866) especially in regards to #8 (posting computer code)
Medyman
03-12-2008, 03:22 PM
1. Please post code within the code tags, either or
. It's 100x easier to help you if we can read the code in a meaningful way

2. Do you have a link to page where we can see the problem?


I'm not 100% I understand your problem but I think you're saying that your absolutely positioned layers are not showing up where you expect them to. There are a couple of things I see with the .description_layer class.

1. You don't have a top or left property set for that class. Even though you're using absolute positioning, the div will not shift from where it would appear in the regular flow, unless you specify where you want to shift it to.

2. If you want to use absolute positioning, you'll have to set the top and left property for EACH of the .description_layer divs because each will have an increasing vertical offset than the last. The other option is to set the CSS of the <td> tag to position:relative. This makes the absolute positioning of the .description_layer divs RELATIVE to the <td> it's contained in. This means you won't have to add seperate top values for each of your elements.

so, what' im suggesting is add the following to ur CSS:

td { position:relative; }
.description_layer { top:10px; left:0 }

Note, you can keep your other .description_layer CSS< just add the above to it.
balushahi
03-12-2008, 03:36 PM
1. Please post code within the code tags, either or
. It's 100x easier to help you if we can read the code in a meaningful way

2. Do you have a link to page where we can see the problem?


I'm not 100% I understand your problem but I think you're saying that your absolutely positioned layers are not showing up where you expect them to. There are a couple of things I see with the .description_layer class.

1. You don't have a top or left property set for that class. Even though you're using absolute positioning, the div will not shift from where it would appear in the regular flow, unless you specify where you want to shift it to.

2. If you want to use absolute positioning, you'll have to set the top and left property for EACH of the .description_layer divs because each will have an increasing vertical offset than the last. The other option is to set the CSS of the <td> tag to position:relative. This makes the absolute positioning of the .description_layer divs RELATIVE to the <td> it's contained in. This means you won't have to add seperate top values for each of your elements.

so, what' im suggesting is add the following to ur CSS:

td { position:relative; }
.description_layer { top:10px; left:0 }

Note, you can keep your other .description_layer CSS< just add the above to it.
Wow, thanks for such a quick reply, appreciate a lot. I tried it -
It's still not positioning right from the left side and now the description layers are hiding behind the table :(
Medyman
03-12-2008, 04:12 PM
to adjust the left positioning, change the value for left property.

as far as the "hiding behind the able" thing, look to z-index. google will turn up some nice tutorials.
balushahi
03-12-2008, 04:21 PM
And following is the html code (Page is on intranet)


<div id="framecontentLeft">
<div class="innertube">
<!-- Place Left menu within this div layer -->

<h3>Left Menu Place holder</h3>
</div>
</div>

<!-- End left frame content here -->

<div id="framecontentTop">
<div class="innertube">
<!-- Begin header content within this div layer-->

<h1>Benefit Grid</h1>

</div>
</div>
<!-- End header content, page title & stage & tier menu here-->

<div id="maincontent">

<div class="innertube">
<!-- Begin actual content - grids table here-->
<a name="top" id="top"></a>

<script type="text/javascript">

contentglider.init({
gliderid: "bagrid",
contentclass: "glidecontent",
togglerid: "togglecontent",
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0,
persiststate: true,
speed: 300,
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<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" style="position:relative;">
<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>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>DS</td>
<td>SACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>AP</td>
<td>MACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>APR</td>
<td>PACC-EM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SA</td>
<td>SACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SASUB</td>
<td>MACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>SAEXCPT</td>
<td>PACC-NEM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br style='clear:both;' />
</div>

<!-- Page 2 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 2 table goes here
</div>

<!-- Page 3 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 3 table goes here
</div>

<!-- Page 4 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 4 table goes here
</div>

<!-- Page 5 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 5 table goes here
</div>

<!-- Page 6 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 6 table goes here
</div>

<!-- Page 7 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 7 table goes here
</div>

<!-- Page 8 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 8 table goes here
</div>

<!-- Page 9 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 9 table goes here
</div>

<!-- Page 10 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 10 table goes here
</div>

<!-- Page 11 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 11 table goes here
</div>

<!-- Page 12 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 12 table goes here
</div>

<!-- Page 13 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 13 table goes here
</div>

<!-- Page 14 content div starts here -->
<div style="left: 800px; height: 500px; visibility: visible;" class="glidecontent">
Page 14 table goes here
</div>

<!-- Last Page / #15 content div starts here -->
<div style="left: 0px; height: 500px; visibility: visible; z-index: 101;" class="glidecontent"> Last page / #15 content goes here
</div>
</div>

<div lastselected="14pg" style="display: block;" id="togglecontent" class="cssbuttonstoggler" align="right">
<a pagenumber="0pg" href="#" class="toc"><span class="toc">1</span></a>
<a pagenumber="1pg" href="#" class="toc"><span class="toc">2</span></a>
<a pagenumber="2pg" href="#" class="toc"><span>3</span> </a>
<a pagenumber="3pg" href="#" class="toc"><span>4</span></a>
<a pagenumber="4pg" href="#" class="toc"><span>5</span> </a>
<a pagenumber="5pg" href="#" class="toc"><span>6</span></a>
<a pagenumber="6pg" href="#" class="toc"><span>7</span> </a>
<a pagenumber="7pg" href="#" class="toc"><span>8</span> </a>
<a pagenumber="8pg" href="#" class="toc"><span>9</span></a>
<a pagenumber="9pg" href="#" class="toc"><span>10</span> </a>
<a pagenumber="10pg" href="#" class="toc"><span>11</span> </a>
<a pagenumber="11pg" href="#" class="toc"><span>12</span> </a>
<a pagenumber="12pg" href="#" class="toc"><span>13</span></a>
<a pagenumber="13pg" href="#" class="toc"><span>14</span> </a>
<a pagenumber="14pg" href="#" class="toc selected"><span>15</span></a>

<a loadpage="0pg" buttontype="previous" href="#" class="prev"><span><< Back</span></a> <a loadpage="0pg" href="#" class="next"><span>Foward >></span></a>
</div>
</div>
</div>

</body>


The problem of positioning is still the same except now the layers hide behind the table.
balushahi
03-12-2008, 07:04 PM
Hi Medyman:

I'd already tried left property, but it doesn't work. the code works fine without table. It is getting around the table cell. It should position to the text in the cell but for some reason it is positioning according to user screen. I need this rectified ASAP and I can't find any forum or code on internet either that has solution to this problem it seems.

But thanks for your prompt reply. I really do appreciate it. Thanks again for your time.
Medyman
03-13-2008, 03:42 AM
Did you had position:relative to the cell?
balushahi
03-13-2008, 02:19 PM
I tried to set td for relative position & layer absolute with top & left property, but that too didn't do anything regarding the position of hover layer, it was still off. I've fixed it with javascript, so its ok. I do appreciate your help.