Hi Dan.
No change. I'm actually running into this in a number of effects, now. It happens when I try to assign the bottom left corner of a div to a given coordinate. If I assign top-left, it works fine. Bottom left gets mis-aligned in bizarre ways (as below). --Larry Garfield On Thu, 10 May 2007 22:47:26 -0400, "Dan G. Switzer, II" <[EMAIL PROTECTED]> wrote: > > Larry, > > What happens if you comment out the calendarTable class? > > When an element has a position of relative, offset positioning from any of > its children is calculated from the relative element position. > > -Dan > >>-----Original Message----- >>From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On >>Behalf Of Larry Garfield >>Sent: Thursday, May 10, 2007 6:42 PM >>To: jQuery (English) >>Subject: [jQuery] Backwards positioning problem >> >> >> >>Hi all. I'm being beaten by a rather strange positioning problem that my >>hair would appreciate some help with. I'm trying to have a div "popup" >>with an ajax call when a link is clicked, and remain present until >>explicitly closed. That part works fine. The problem is positioning > that >>div. I want it to be located so that its bottom left corner corresponds >>with the link that was clicked. I can get the horizontal position > correct, >>but the vertical position is completely bizarre. I have a series of > links >>in a table (calendar), and if I click a link in the first row, the div >>shows up some 900 pixels too far down. If I click the second row, the > div >>shows up *higher* than if I click the first row, but still some 825 > pixels >>too far down. It happens in both Firefox 2 and IE 6. The third row it's >>~800 pixels too low. And so on. I've been able to replicate this > behavior >>in several different configurations, although sometimes the div shows up >>way too high rather than too low. I am completely confused. :-( >> >>I've managed to narrow down the code to the following test case, which > uses >>jquery 1.1.2 and the dimensions plugin (and firebug, of course). Any >>suggestions would be greatly appreciated. Thanks. >> >><!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> >><script src="jquery/jquery-1.1.2.pack.js" > type="text/javascript"></script> >><script src="dimensions.js" type="text/javascript"></script> >> >><style type="text/css"> >>#calendarTip { >>display: none; >>position: absolute; >>width: 180px; >>height: 135px; >>z-index: 10; >>background: white; >>text-align: left; >>border: 1px dotted green; >>} >>.calendarTable { >>position: relative; >>} >></style> >><script type="text/javascript"> >>$(document).ready(function() { >> $('<div id="calendarTip"></div>').appendTo('body'); // The >>popup div >> $('.calendarTable a').bind('click', function(event) { >> event.preventDefault(); >> var offset = $(event.target).offset({scroll: false}); >> console.debug(offset); // When >>clicking the 3rd link (21), this prints top=79, left=11 >> $('#calendarTip') >> .css('bottom', offset.top) >> .css('left', offset.left) >> .load($(this).attr('href'), {}, function(responseText, status, >>response) { >> var popup = $(this).show(); >> popup >> .find('.closeLink').bind('click', function(event) { >> event.preventDefault(); >> popup.hide(); >> }).end() >> .show(); >> console.debug($('#calendarTip').offset({scroll: false})); // This >>prints top=851, left=12 >> console.debug($('#calendarTip').css('bottom')); // This >>prints 79 >> console.debug($('#calendarTip').css('left')); // This >>prints 11 >> }); >> }); >>}); >></script> >></head> >><body> >><div id="calendar"> >> <table class="calendarTable"> >> <tr> >> <td><a href="popup.html">Sa<br />7</a></td> >> </tr> >> <tr> >> <td><a href="popup.html">14</a></td> >> </tr> >> <tr> >> <td><a href="popup.html">21</a></td> >> </tr> >> <tr> >> <td><a href="popup.html">28</a></td> >> </tr> >> <tr> >> <td><a href="popup.html">4</a></td> >> </tr> >></table> >></div> >> >></body> >></html> >> >> >> >>--Larry Garfield
