Table content is cut off on left side

[joewiz]

As noticed by @awmarrs and passed to me by @seckroth, the tables at the top of https://history.state.gov/historicaldocuments/frus1950v05/d985 is cut off, and there is no way to scroll to see the hidden content.

See the left margin of the table from the URL above:

At first I thought this was a case of needing an overflow-x property, but upon further investigation I believe the culprit is the padding: 8px property from the .tei-table and .tei-cell classes. Disabling this padding: 8px property resolves the problem of cut-off content:

Here's how the appearance changes with the padding: 8px property removed:

This phenomenon seems similar to that reported in #256, but I don't think the TEI source or rendition values defined in the file is responsible.

@plutonik-a Do you have any ideas about how we should fix this?

[plutonik-a]

@joewiz Found the cause: A rule for a text-indentation!

Removing it, the table cells looks fine:

[plutonik-a]

@joewiz I was about to fix the document_hanging layout and wasn't able to locate how this class and its css rules are even applied to the markup.
The css seems to be injected as inline css right into the DOM. Looking at the TEI source I find these renditions:

<table>
    <row>
        <cell rend="padding-left: 3em">
            <hi rend="smallcaps">u.s.</hi>
        </cell>
        <cell rend="padding-left: 3em">
            <hi rend="smallcaps">south africa</hi>
        </cell>
    </row>
    <row>
        <cell rendition="#hanging">Secretary Marshall</cell>
        <cell rendition="#hanging">Mr. Francis C. Erasmus, Minister of
            Defense;</cell>
    </row>
    <row>
        <cell rendition="#hanging">Major General Lemnitzer, <gloss
                target="#t_OSD1">OSD</gloss>
        </cell>
        <cell rendition="#hanging #top">Mr. Hubert F. Cuff, Secretary
            for Defense;</cell>
    </row>
    <row>
        <cell rendition="#hanging">Colonel A. Drexel Biddle, Army</cell>
        <cell rendition="#hanging">Major General Christian L. DuToit,
            Chief of General Staff;</cell>
    </row>
    <row>
        <cell rendition="#hanging">Captain Craig, <gloss
                target="#t_OSD1">OSD</gloss>
        </cell>
        <cell rendition="#hanging">Brigadier Klopper</cell>
    </row>
    <row>
        <cell rendition="#hanging">Major George, <gloss target="#t_OSD1"
                >OSD</gloss>
        </cell>
        <cell rendition="#hanging">Ambassador G. P. Jooste</cell>
    </row>
    <row>
        <cell/>
        <cell rendition="#hanging">Colonel DeVos, Combined Air Military
            Attaché</cell>
    </row>
</table>

So it's the bit rendition="#hanging" in contrast to the other rend="" rules I am used from the ODD transformation, that makes me thinking, we might have a different, or customized css rendering applied here.
I've searched my local hsg-project database (including all installed external packages) for all possible keywords to find the transformation code without any luck (document_hanging, document_, hanging, #hanging, and more)

This is the rendered HTML that is inserted right before the TEI div (https://history.state.gov/historicaldocuments/frus1950v05/d985):

<style type="text/css">.document_left {
   display: inline; float: left;
}
 .document_hanging {
   padding-left:2em; text-indent:-1.5em;
}
 .document_top {
   vertical-align: top;
}
 .document_right {
   display: inline; float: right;
}
</style>

Could you please tell me, how this inline css is rendered and inserted?

Apart from that, those injected css values are rather problematic to maintain, so I would suggest to handle the layout by the general frus.odd.
Also I would suggest to move all css values (i.e. <cell rend="padding-left: 3em">) entirely from the TEI into css / odd files in order to have a centralised layout maintenance plus being able to apply different output renditions, unless there is a good reason to leave it as a fixed value in the source.