Why am I getting colored boxes around my text instead of colored text in Salesforce?
I have a Visualforce page with a custom controller in which I use a script tag shown below. This should result in red text in my table to indicate errors, but instead I am getting red boxes around the text. Somehow this must be something that Salesforce is doing and I would like to know how to make it work the way I want it, which is just the way it would work if this were plain HTML with an embedded Style tag.
Here is the style tag from my Visualforce code:
Here is the table from my Visualforce code:
I am actually getting one table for record, so it is wrapped in a repeat tag:
It should look like this:
but it looks like this:
The HTML file that makes the image that is what it should looks like this is:
Here is the entire Visualforce page code:
Here is the style tag from my Visualforce code:
<style>
.right {text-align: right}
.error {color: #800000}
table {border-collapse: collapse}
</style>Here is the table from my Visualforce code:
I am actually getting one table for record, so it is wrapped in a repeat tag:
<apex:pageBlockSection id="TaxAccountPaymentApplication" rendered="{!ShowDist}" columns="1"
title="Distribute payment amounts">
<apex:outputPanel >
<apex:repeat value="{!TaxAccountPaymentInfoMap}" var="tapikey">
<B>Pay ${!TaxAccountPaymentInfoMap[tapiKey].AmountToPay} on {!TaxAccountPaymentInfoMap[tapiKey].Selector}</B><BR />
<table border="1">
<tr>
<th> </th>
<th class="right">Tax</th>
<th class="right">Penalty</th>
<th class="right">Interest</th>
<th class="right">Costs</th>
</tr>
<tr>
<td>Current account balance</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountDue}</td>
</tr>
<tr>
<td>Amount to pay</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
</tr>
<tr>
<td>Balance to remain</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountToRemain}</td>
</tr>
<tr>
<td>Status</td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].TaxPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].InterestPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].CostsPaymentApplicationStatus}</span></td>
</tr>
<tr>
<td colspan="5"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].OverallPaymentApplicationStatus}</span></td>
</tr>
</table>
<br />
</apex:repeat>
<apex:commandButton value="Apply Payment" rendered="{!OverallPaymentApplicationStatusIsValid}" action="{!ShowDistribution}"/>
</apex:outputPanel>
</apex:pageBlockSection>It should look like this:
but it looks like this:
The HTML file that makes the image that is what it should looks like this is:
<html>
<head>
<style>
.right {text-align: right}
.error {color: #A00000}
table {border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th> </th>
<th class="right">Tax</th>
<th class="right">Penalty</th>
<th class="right">Interest</th>
<th class="right">Costs</th>
</tr>
<tr>
<td>Current account balance</td>
<td class="right">300</td>
<td class="right">50</td>
<td class="right">10</td>
<td class="right">5</td>
</tr>
<tr>
<td>Amount to pay</td>
<td class="right">10</td>
<td class="right">5</td>
<td class="right">2</td>
<td class="right">1</td>
</tr>
<tr>
<td>Balance to remain</td>
<td class="right">290</td>
<td class="right">45</td>
<td class="right">8</td>
<td class="right">4</td>
</tr>
<tr>
<td>Status</td>
<td class="right"><span class="error">Tax</span></td>
<td class="right"><span class="error">Penalty</span></td>
<td class="right"><span class="error">Interest</span></td>
<td class="right"><span class="error">Costs</span></td>
</tr>
<tr>
<td colspan="5"><span class="error">OverallPaymentApplicationStatus</span></td>
</tr>
</table>
</body>
</html>Here is the entire Visualforce page code:
<apex:page controller="TransactionWizardController" tabStyle="Transaction__c">
<apex:form >
<style>
.right {text-align: right}
.error {color: #800000}
table {border-collapse: collapse}
</style>
<apex:pageBlock Title="Kurant Collections Transaction Wizard">
<apex:pageMessages id="pageMessages"> </apex:pageMessages>
<apex:pageBlockSection id="AmountOfPaymentSection" title="Payment">
Amount of this payment: <apex:inputText value="{!AmountOfPayment}" />
</apex:pageBlockSection>
<apex:pageBlockSection id="TownPicker" title="Town">
<apex:selectList value="{!SelectedTownID}" size="1">
<apex:selectOptions value="{!TownsOptions}" />
<apex:actionSupport event="onchange" reRender="TaxpayerPicker,TaxAccountApplication,TaxAccountApplication2,TaxAccountPaymentApplication,TaxpayerIDSection,pageMessages"/>
</apex:selectList>
</apex:pageBlockSection>
<apex:pageBlockSection id="TaxpayerPicker" title="Taxpayer"> <!-- rendered="{!SelectedTownID != null}" -->
<apex:selectList value="{!SelectedTaxpayerID}">
<apex:selectOptions value="{!TaxpayersOptions}" />
<apex:actionSupport event="onchange" action="{!PopulateTaxAccountPaymentInfoMap}"
reRender="TaxAccountApplication,TaxpayerIDSection,AmountLeft,pageMessages" />
</apex:selectList>
</apex:pageBlockSection>
<apex:pageBlockSection id="TaxpayerIDSection" rendered="false">
Selected Taxpayer ID: {!SelectedTaxpayerID}<br />
</apex:pageBlockSection>
<apex:pageBlockSection id="TaxAccountApplication" rendered="true" columns="1"
title="Allocate payment to tax accounts">
<apex:outputPanel >
<table border="1">
<tr>
<th>Tax account</th>
<th class="right">Amount due</th>
<th class="right">Amount to pay</th>
</tr>
<apex:repeat value="{!TaxAccountPaymentInfoMap}" var="tapiKey">
<tr>
<td><apex:outputText value="{!TaxAccountPaymentInfoMap[tapiKey].Selector}" /></td>
<td class="right"><apex:outputText value="{!TaxAccountPaymentInfoMap[tapiKey].Amountdue}" /></td>
<td class="right"><apex:inputText value="{!TaxAccountPaymentInfoMap[tapiKey].AmountToPay}" >
<apex:actionSupport action="{!UpdateTaxAccountPaymentInfoMap}" event="onchange"
reRender="AmountLeft,pageMessages,TaxAccountPaymentApplication" />
</apex:inputText></td>
</tr>
</apex:repeat>
</table>
</apex:outputPanel>
</apex:pageBlockSection>
<apex:pageBlockSection id="AmountLeft">
Amount remaining to allocate: {!AmountRemainingToPay}<br />
<!-- Incrementing counter: {!IncrementingCounter}<br /> -->
<apex:commandButton value="Distribute Payment" rendered="{!ShowDistributionButton}" action="{!ShowDistribution}"/>
</apex:pageBlockSection>
<apex:pageBlockSection id="TaxAccountPaymentApplication" rendered="{!ShowDist}" columns="1"
title="Distribute payment amounts">
<apex:outputPanel >
<apex:repeat value="{!TaxAccountPaymentInfoMap}" var="tapikey">
<B>Pay ${!TaxAccountPaymentInfoMap[tapiKey].AmountToPay} on {!TaxAccountPaymentInfoMap[tapiKey].Selector}</B><BR />
<table border="1">
<tr>
<th> </th>
<th class="right">Tax</th>
<th class="right">Penalty</th>
<th class="right">Interest</th>
<th class="right">Costs</th>
</tr>
<tr>
<td>Current account balance</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountDue}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountDue}</td>
</tr>
<tr>
<td>Amount to pay</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
<td class="right">
<apex:inputText style="text-align: right" value="{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountToPay}">
<apex:actionSupport action="{!UpdatePaymentApplicationStatus}" event="onchange"
reRender="TaxAccountPaymentApplication" />
</apex:inputText>
</td>
</tr>
<tr>
<td>Balance to remain</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].TaxAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].InterestAmountToRemain}</td>
<td class="right">{!TaxAccountPaymentInfoMap[tapiKey].CostsAmountToRemain}</td>
</tr>
<tr>
<td>Status</td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].TaxPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].PenaltyPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].InterestPaymentApplicationStatus}</span></td>
<td class="right"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].CostsPaymentApplicationStatus}</span></td>
</tr>
<tr>
<td colspan="5"><span class="error">{!TaxAccountPaymentInfoMap[tapiKey].OverallPaymentApplicationStatus}</span></td>
</tr>
</table>
<br />
</apex:repeat>
<apex:commandButton value="Apply Payment" rendered="{!OverallPaymentApplicationStatusIsValid}" action="{!ShowDistribution}"/>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
ASKER
It seems to be using the color I specified in my style tag so I don't know why Salesforce would change my style into something similar but different.