I recently implemented the following CSS layout on a site in place of
a previous table layout:
http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm
After doing so I cannot get DIVs to position correctly in some
instances when using jQuery to do so. One in particular is too far
down and over to the right.
Unfortunately I don't have a page to show because the code is on a
backend area that requires login. However, the code I was previously
using that worked great to cause a box to display right below a link
is this:
__________________________________________________
$('div#box').css('position', 'absolute');
$('div#box').css('left', $('a#link').offset().left);
$('div#box').css('top', ($('a#link').offset().top + $
('a#link').outerHeight() + 2));
$('div#box').show('normal');
__________________________________________________
However, I found that I now need to add or subtract the padding and
margins from enclosing DIVs due to the new CSS layout and I am
perplexed as to why:
__________________________________________________
$('div#box').css('position', 'absolute');
margin_left = $('div#outer').css('margin-left');
margin_left = margin_left.substring(0, margin_left.indexOf('px'));
pad_right = $('div#centrecontent').css('padding-right');
pad_right = pad_right.substring(0, pad_right.indexOf('px'));
$('div#box').css('left', ($('a#link').offset().left + pad_right -
margin_left));
pad_top = $('div#outer').css('padding-top');
pad_top = pad_top.substring(0, pad_top.indexOf('px'));
$('div#box').css('top', ($('a#link').offset().top + $
('a#link').outerHeight() + 2 - pad_top));
$('div#box').show('normal');
__________________________________________________
Even more perplexing is that if I leave "pad_right" inside those
calculations it causes the box to fly about 5160 pixels off to the
right of the screen. Checking the value in the console shows that
pad_right has a value of 6. If I remove pad_right and directly
substitute in the number 6 then the box positions normally.
Can anyone help explain to me what I am doing wrong here?
