CODEWITHSUNDEEP
javascriptcssinternet-explorer
ixx
ixx

Reputation: 32269

Why Internet Explorer auto adjusts style.left value of div in certain cases?

I'm adjusting the style of a div with javascript:

div.style.left = "486px";

I output the value:

console.log("left after:" + div.style.left);

the output:

LOG: left after:486px

looks fine. But I see the div is not there. I inspect inline style with developer tools:

left: 852px

This doesn't happen always. Certain changes of left value work correctly. But on others some "extra" adjustment is made after.

It only happens in Internet Explorer (tested with version 8). Tested in Firefox, Chrome, Opera and Safari and this doesn't happen. Any idea?

I'm doing this adjustements as a reaction to browser zoom using $(window).resize function. I make the output "left after:" at the end. I assume the browser has finished with all zoom and reposition stuff. I set my value, I output it at the very end, and then expect to see this value in CSS. This happens in most cases, but sometimes (big zoom) I get these different values.

Edit: happens only when browser zoom is being set to 150% or 175%. On 150% for example I set left value to 567px. But in CSS I get 851px when coming back to zoom level 125% or less it works again. From 200% forwards it also works (set 425px).

Upvotes: 0

Views: 167

Answers (2)

Seabass
Seabass

Reputation: 1983

The element you're modifying needs to have a position of absolute or relative for positioning to work.

Additionally, since you're using jQuery, use $(element).css('left', "852") instead of div.style.left. jQuery handles this (and IE's exceptions) more elegantly.

Upvotes: 0

Joseph
Joseph

Reputation: 119867

Absolute Positioning

An element whose position property has the value absolute is said to be absolutely positioned, and is completely removed from the document flow: it doesn’t affect subsequent elements at all. It’s positioned with respect to its containing block, and it establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.

Containing Block

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.

elements naturally have the position of static, thus not making it a containing block by default. to prove that, check this demo. try adding position:relative to body, that should make it a containing block.

Upvotes: 1

Related Questions