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>
After looking at the revised code here, it appears to be a sub-pixel rendering issue. The problem is, that although the computers are capable of computing fractional numbers, we can only display webpage elements using whole pixels. Each browser approaches this problem differently and IE doesn’t do the way most other browsers do. If the size of your elements are evenly divisible by 4 this will not happen. Set the height of your original div, in your code example, to something like 128px high and you’ll see what I mean. That one pixel white gap disappears.
Is it absolutely necessary that the divs be laid out this way? Must the bottom one be longer or can you have the one on the left extend past the red div to create the L shape? Can it be done with a single div that is layered underneath the red div and only made to look as if it were “hugging” the red div in the desired L shape?
There are lots of reasons for the design choices we make and I’d just like to know if it’s the visual effect you’re looking for, or the exercise of putting the divs in the L shape. It’s not wrong either way, but your answer could change the solution.