Why do white boxes or white spaces appear when using background colours? – Exclaimer Cloud Knowledge Base

Scenario

You are using Exclaimer Cloud, and you notice that white boxes or white spaces appear when you use background colours within Microsoft Outlook.

Reason

Unfortunately, Microsoft Outlook renders background colours and other elements within the signature itself. This is most commonly seen when using client-side signatures.

Although you cannot control it 100%, you can take steps to minimize this issue.

Resolution

NOTE: The steps described here assume that you have already created an email signature. For more information, see how you can create a signature.

To minimize the effect of this issue:

Assign a background colour to all signature elements (text boxes and images), table cells, tables and groups.
Set a Stretch alignment to all text boxes, tables and groups.
You may need to convert some groups to tables first before moving to the next step.
Reduce the gap between the rows and columns.
Use the Rows & Columns settings to apply a Row and Column width. If required, apply a fixed width to the table.

Once you follow these steps, you will see that the white box will disappear. You may at times get the odd white line, but this is, unfortunately, something we cannot control - this is how Microsoft Outlook renders the colours. For more information, see What do the coloured borders mean in the Exclaimer Cloud signature designer?

Please click on the required options listed below to go through the detailed description:

Assigning a background colour

Assign a background colour to all signature elements (text boxes and images), table cells, tables and groups.

Select the relevant signature element, then from the right-hand side Properties pane, expand the Background section.
Set the background colour.

Example of assigning Background colour to Table:

Example of assigning background colour to a Cell:

Example of assigning background colour to Group:

Example of assigning background colour to Text:

Setting Stretch alignment

Set the Alignment properties to text boxes, tables and groups.

Select the relevant signature element, then from the right-hand side Properties pane, expand the Alignment section.
In Horizontal, select STRETCH.

Example of Stretch alignment to Text:

Example of Stretch alignment to Group:

Example of Stretch alignment to Table:

Reducing the gap

Reduce the gap between the rows and columns.

From the right-hand side Properties pane, expand the Rows & Columns section.
In the space provided, enter the rows and column width. If required, you can apply a fixed width to the table.

Example of setting the Rows & Columns:

Example of setting a fixed width to the table: