611176 - Headline images on mobile msnbc.com are shifted out of div

Status: RESOLVED DUPLICATE of bug 63895

(Firefox for Android Graveyard :: General, defect)

Description

[Tony Chung [:tchung]]

Attachment: misaligned images

See screenshot.   It looks properly aligned on Android stock browser

Repro:
1) install android nightly: Mozilla/5.0 (Android; Linux armv71; rv:2.0b8pre) Gecko/20101110 Firefox/4.0b8pre Fennec/4.0b3pre
2) visit url
3) Verify images are misaligned

Expected:
- images fit within the div.  looks proper on Android stock browser

Actual:
- misaligned

Comment 2

[Brad Lassey [:blassey] (use needinfo?)]

Attachment: firefox screenshot

desktop firefox renders this the same way, it might be a problem for evangelism

Comment 3

[Brad Lassey [:blassey] (use needinfo?)]

the image is position:absolute;top:10;left:10 and inside an anchor element further down on the page. Both desktop firefox and fennec render this the same way. To be honest, I don't know if this is correct behavior or not.

Comment 4

[Boris Zbarsky [:bzbarsky]]

So what are the steps to reproduce (on desktop, say).

Comment 5

[Brad Lassey [:blassey] (use needinfo?)]

(In reply to comment #4)
> So what are the steps to reproduce (on desktop, say).

http://lassey.us/pos.html is a reduced test case, it seems that msnbc's mobile site expects the red and blue blocks to be in the green div. In order to see the mobile version of msnbc, just spoof your UA string (I'm using https://addons.mozilla.org/en-US/firefox/addon/59/)

Comment 6

[Boris Zbarsky [:bzbarsky]]

The site has this markup:

  <li class="story multimedia">
    <a>
      <img >
    </a>
  </li>

and these CSS rules that are relevant:

  li.multimedia img { position: absolute; top: 10px; left: 10px }
  li.multimedia { position: relative }
  .story { display: table }