Forum Bugs

Block element within Inline element - color styles not applying

theadventmaster
The 'pink' color is applied to both the span and em in a browser, but the em is black after coming out of PrinceXML 12.

I've lots of ways around it, including !important'ing the styles and the pink still wouldn't apply to the em. I have to display: block the span in order to get it to apply.

This is obviously improper HTML since block elements should not be nested inside inline elements. However, I do think browsers failure much more elegantly in this case.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      span { color: pink; }
      em { display: block; }

      @page { margin: 50px; padding: 50px; size: A4 landscape; }
    </style>

  </head>
  <body>
      <span>
        <em>This</em> is odd.
      </span>
  </body>
</html>
hallvord
I can confirm. Thanks for the very simple demo, I tweaked it just a little bit to make it self-describing. Setting any random element to display:block should not affect how styles are applied to other elements, this is rather curious..

I have also put a modified version of your test here https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/block-inside-inline-element-001.htm and hope you don't mind it being reused :)

Announcement: repos for tests/utils

  1. 4373.htm0.3 kB
    Test case
  2. 4373.pdf10.8 kB
    Rendering