I have a weird problem with absolute positioning and size of elements to fit around a div. I have a div that is set in position and size on an existing page (it is given to me). I want to decorate it on the left and bottom with two divs so that they “hug” it and create a “L” shape. I need to do this dynamically, as the div size and position change during normal use of the web page.
To achieve my goal, I first get the offset of the div using jquery.offset () and dimensions using .outerWidth / Height. Then I calculate the limits of the div (top, bottom, left) and use the size and absolutely position of my two divs, which are 0.5 opaque and have a high z index (see Code Example). I set the size of the divs using jquery.width and .height, and position using .css with the "top" and "left" properties. I tried using .offset to set the positioning, but didn't seem to work (I ran into overlaps and / or unwanted spaces in all browsers).
This parameter is great for FF (tested at 3.6), regardless of what the "view-> zoom" setting is. However, in IE8 (IE8 standards mode) and chrome (tested on version 6) this will only work fine as long as "view-> zoom" is set to 100%. If a higher value is set (say 125% in IE), between the upper and lower divs (c and a in my demo code) a distance of 0.5px will be set for certain height values of the decorated div (red div b in my code example) . when the scaling value is set to less than 100% (for example, 75% in IE), two divs overlap for some values of the decorated div height.
I created a sample page showing a problem in jsbin.com - a demo . When running this example in IE with the 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 height of the div and see how things behave. You can also enter a number in the text box, and then click the Go button to go to a specific height.
I really hope that someone will find a solution for this, since I have been banging my head about this for quite some time, having tried all kinds of things here.
Update: Following the Strelok example below, I forgot to specify that I have to have “hugging” DIVs in order to be absolutely placed in the BODY tag so that I can be sure that they will always overlap the rest of the page. I cannot rely on them to be in the same container as the red DIV, and not change their basic positioning properties (position: aboslute, like the BODY and zindex children).
Update: hradac below gave an answer that solves this problem for standard IE scaling modes. This is enough so that I can make an answer, but if someone else has another idea that could solve the problem as a whole, I would like to hear it.
I created the sample code as a very simple demonstration of the problem that I encountered. I apologize for not becoming clearer at the beginning.
here is the code of my index.html file with all the JS inside, for those who do not want to go to jsbin, or if for some reason it does not work. 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>