CODEWITHSUNDEEP
htmlcssinternet-explorer
NightOwl888
NightOwl888

Reputation: 56849

Relative Positioning in IE 11 Incorrect Pixel Width

I am having a positioning issue that only seems to happen in IE (11). I am trying to absolutely position a div tag relative to another element.

The tag in question looks like this:

<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 CSS in question looks like this:

#depotproductpage #pricecolumn #FacebookWrapper { display:block; position:relative; }
#depotproductpage #pricecolumn #FacebookWrapper div { position:absolute; left:260px; }

The page is online at: http://www.foldingchairdepot.com/p/National-Public-Seating-200-Series-Premium-Steel-Folding-Chair---Set-of-4__NPS-200-SERIES.aspx

Problem:

The problem is that in IE 11, 260px makes the element display too far to the right. In FireFox and Chrome, it is exactly where I want it.

I tried experimenting with it by first setting it to left:0px, and that displayed correctly in all browsers, aligning to the left edge of the parent div. I also tried left:50px and IE seems to move the div about 70 px in this case, but the other browsers show it where it should be. For some reason in IE 11, specifying 1px moves the element about 1.5 px, and I am struggling to find a reason why this is happening.

I also tried setting a fixed width on both the element and wrapper, and tried changing it from position:relative to position:static (as specified here) to no avail.

I should also point out that this code has been in production for several years and only since the release of IE 11 has there been an issue with the positioning of this element.

How do I force IE 11 to honor left:260px absolute position like the other browsers do?

Upvotes: 0

Views: 1044

Answers (1)

pstenstrm
pstenstrm

Reputation: 6489

This is an issue with how Facebook handles IE11. In Chrome and Firefox the like button is a <fb:like> element, which obviously is a non-standard element. In IE11 the like button falls back to a <div> element. You position the button by styling the <div> with:

#depotproductpage #pricecolumn #FacebookWrapper div { position:absolute; left:260px; }

In IE11 that will position your like button at left: 520px. Change the CSS selector to 

#depotproductpage #pricecolumn #FacebookWrapper .facebooklikebutton

and the issue will be solved.

Upvotes: 1

Related Questions