Phase Bar Pop Up coming in blank

[medinamilam1991]

I am using two codes to create a phase for my capital improvement dashboard. I the codes are 5 years old and I can't figure out what is wrong. I just doesn't work. 

The first cold gives the color in the Attribute Expression. 

IIF($feature.Status == 'Design', 'background-color:#800080', 'background-color:#808080')


The second code I am using is HTML in the Text pop up of the layer. 

<span><b>Phase</b></span>
<table style=" border-collapse: separate; border-spacing: 6px 4px; width: 100%; table-layout: fixed;">
  <tbody><tr height="16">
    <td style="{expression/expr0}"></td>
    <td style="{expression/expr1}"></td>
    <td style="{expression/expr2}"></td>
    <td style="{expression/expr3}"></td>
  </tr>
  <tr height="24" style="text-align: center;">
    <td>PreDesign</td>
    <td>Design</td>
    <td>Construction</td>
    <td>Closeout</td>
  </tr>
</tbody></table>

Can someone please point me in the direction. I can't figure out what I am doing wrong. 

[AndrewZimba1]

Interesting.  I have the same thing going on in my dashboard.  It has worked correctly for at least a couple years, then mysteriously just stopped and returns blanks.  The rest of the popup HTML seems to be working fine.

<p>
        <br>
        <strong>Notification Status</strong>
    </p>
    <figure class="table">
        <table style="border-collapse:separate;border-spacing:2px 2px;margin:2px;">
            <tbody>
                <tr height="10">
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                </tr>
                <tr style="text-align:center;" height="10">
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        Pending
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        No Conflict
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        No Cost
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        Utility Agreement
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
    <p>
        <strong>Design Phase</strong>
    </p>
    <figure class="table">
        <table style="border-collapse:separate;border-spacing:2px 2px;margin:2px;">
            <tbody>
                <tr height="10">
                    <td style="text-align:center;width:20%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:20%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:20%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:20%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:20%;">
                        &nbsp;
                    </td>
                </tr>
                <tr style="text-align:center;" height="10">
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:20%;">
                        Internal Review
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:20%;">
                        Preliminary
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:20%;">
                        DOT Approval
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:20%;">
                        DOT Approved
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:20%;">
                        IFC
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
    <p>
        <strong>Construction Phase</strong>
    </p>
    <figure class="table">
        <table style="border-collapse:separate;border-spacing:2px 2px;margin:2px;">
            <tbody>
                <tr height="10">
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                    <td style="text-align:center;width:25%;">
                        &nbsp;
                    </td>
                </tr>
                <tr style="text-align:center;" height="10">
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        In Progress
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        Complete
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        On Hold
                    </td>
                    <td style="font-weight:normal;padding-left:0px;text-align:center;width:25%;">
                        &nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
</div>