Hi all,
I have a strange problem with absolute positioning and sizing elements to fit around a div. I have some div that's set in position and size on an existing page (it's given to me). I want to adorn it from the left and bottom with two divs, so that they'd "hug" it and create an "L" shape. I need to do this dynamically, as the div size and position change in the course of the normal usage of the web page.
To achieve my goal I first get the div's offset using jquery's .offset() and dimensions using .outerWidth/Height. I then calculate the div's limits (top, bottom, left) and use the to size and absolutely position my two divs, which are 0.5 opaque and with a high z-index (see sample code). I set the divs' size using jquery's .width and .height, and position using .css with the "top" and "left" properties. I tried using .offset to set positioning but did not seem to work well (I ran into overlaps and/or unwanted spaces in all browsers).
This setting works great for FF (tested on 3.6) no matter what the "view->zoom" setting is. However, on IE8 (IE8 standards mode), and chrome (tested on version 6), this will work perfectly only as long as "view->zoom" is set to 100%. If set to higher (say 125% in IE) a 0.5px spacing will occur between the top and bottom divs (c and a in my demo code) for certain values of the adorned div's (red div b on my sample code) height. when zoom is set to less than 100% (say 75% in IE), overlaps of the two divs will occur for some values of the adorned div's height.
I created a sample page demonstrating the problem in jsbin.com - demo. When running this sample on IE with view->zoom set to 125% the default size of the red div should demonstrate the problem. try using the "up" and "down" buttons to change the div's height and see how things behave. you can also type a number in the textbox and then click the "go" button to jump to a specific height.
I really hope someone finds a solution for this, as I've been banging my head against this one for quite some time, trying all kinds of different stuff here.
Update: Following Strelok's answer below, I forgot to state that I must have the "hugging" DIVs to be absolutely positioned in the BODY tag, so that I can be sure that they'd always overlay the rest of the page. I can't rely on them to be in the same container as the red DIV, nor change their basic positioning properties (position:aboslute, as children of BODY, and the zindex).
Update: hradac below gave an answer that solves this problem for the default zoom modes of IE. This is enough for me to constitute an answer, but if anyone else has some other idea that could solve the problem in a general way, I'd love to hear it.
I created the sample code as a very simple demonstration of the problem I ran into. I apologize for not being clearer on the point at first.
here's the code of my index.html file with all the JS inside, for those that don't want to go to jsbin, or if it doesn't work for some reason. you can just copy-paste and save this as index.html to run.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var a= $('<div/>');
var c= $('<div/>');
$('body').append(a);
$('body').append(c);
var b=$('#somediv');
function draw(){
var docWidth=$(document).width();
var bLims={
top:Math.floor(b.offset().top),
left:Math.floor(b.offset().left),
bottom:Math.ceil(b.offset().top + b.outerHeight())
}
a.show();
c.show();
a.css({
top: bLims.bottom+'px',
left: 0+'px'
}).width(docWidth).height(bLims.bottom-bLims.top);
c.css({
top: bLims.top+'px',
left: 0+'px'
}).width(bLims.left).height(bLims.bottom-bLims.top);
}
a.css({
position: 'absolute',
opacity: 0.5,
zIndex: 9000,
backgroundColor:'#555'
}).css({
display: 'block'
});
c.css({
position: 'absolute',
opacity: 0.5,
zIndex: 9000,
backgroundColor:'#555'
}).css({
display: 'block'
});
draw();
$('#go').click(function(){
b.height($('#height').val()+'px');
draw();
})
$('#up').click(function(){
b.height(b.height()+1+'px');
$('#height').val(b.height());
draw();
})
$('#down').click(function(){
b.height(b.height()-1+'px');
$('#height').val(b.height());
draw();
})
});
</script>
</head>
<body>
<input type="textbox" style="width:10em" id="height"></input><button id="go">go</button><button id="up">up</button><button id="down">down</button>
<div id="somediv" style="position:relative;top:200px;left:200px;height:106px;width:73px;background-color:#FF0000"></div>
</body>