I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element.
The problematic code snippet appears as follows:
<div id="FacebookWrapper">
<div class="facebooklikebutton">
<fb:like layout="button_count" show_faces="false" width="90" font="verdana" ref="ProductPageTop"></fb:like>
</div>
</div>
The relevant CSS code looks like this:
#depotproductpage #pricecolumn #FacebookWrapper { display:block; position:relative; }
#depotproductpage #pricecolumn #FacebookWrapper div { position:absolute; left:260px; }
You can view the page online at:
Issue:
The concern is that in IE 11, the specified 260px makes the element appear too far to the right. In FireFox and Chrome, it aligns perfectly where intended.
I attempted different values such as starting with left:0px, which displayed correctly across all browsers, aligning with the left edge of the parent div. Trying left:50px caused IE to shift the div about 70 px, while other browsers positioned it as expected. Interestingly, specifying 1px in IE 11 moves the element approximately 1.5 px, presenting a puzzling inconsistency.
I also experimented with setting fixed widths on both the element and wrapper, as well as changing from position:relative to position:static following advice found here, but these adjustments didn't resolve the issue.
It's worth noting that this code has been live for years, and only recently, with the introduction of IE 11, has the positioning problem surfaced.
Any suggestions on how to ensure IE 11 respects the absolute position set by left:260px, similar to the behavior exhibited by other browsers?