A common challenge that we here in tech support often hear about is how to fix pages or columns within pages that suddenly become much wider than the publisher anticipated. There is typically one of three things causing this and knowing what to watch out for can help you avoid this dilemma in your newsletter.

#1 – Image Sizing

When you import an image, the eNews Builder system doesn't truncate or change the image from its original intended size, meaning that images may display at sizes wider that the space allotted for them. This will then force the page or the column to become wider than intended. This is most often seen with banner images at the top of a newsletter.

Many times, we're asked what the restrictions are on the dimensions of image files that can be used as banners. From an eNews Builder system perspective, there isn't one (except that we recommend that the file should stay as close to a 20KB file size as possible, regardless of dimensions). The only real restriction, therefore, is the intended width of the newsletter itself. So before configuring a new banner logo, go into your Layout and click the "Page Layout" button at the top. There you will find a "Page Width" property. This, minus about 5 pixels for a border, would be the width you would want to use for your banner image. Anything wider will force the page to become too wide.

To check column widths, you can go to the “Page Layout" area of the Layout Editor and click on the "Column Properties" button. There you can check what percentage of the total page width a certain column will be. Some quick math will give you the width of that column. This (again, minus a buffer) should be the maximum width of any image that you use for display in that column.

#2 – Table Sizing

When uploading MS Word documents, or even using the online HTML editor, you may end up with HTML tables in your articles or layout elements. They are very useful in laying things out within HTML text, but using them incorrectly can result in things being out of position.

If the width of the table is not set properly, it can become a problem. To set the table width, you can do it in one of two ways – you can either set a pixel width or a percentage width. In this case, the percentage width is a better option because it works as a percentage of the space allotted, regardless of the width of the column it will appear in. You can set up the widths in either Word (within the table properties) or in a native HTML editor.

The “set pixel width” is a little more involved and can more easily cause problems since it requires a definitive number. If the “set width” of the table is wider than the number of pixels allotted for the column it's within, the page will be forced wider to accommodate it. It can be complicated trying to fix this in the online HTML editor, both because the editor may actually be wider than the column of the layout the text is in, and because an existing table can be difficult to select to bring up the properties.

The safest way to fix the width of tables is to look at the raw HTML code, which should be right in the field above the "Use Editor" button. Put your cursor in this field and hit CTRL and F on your keyboard. This should bring up a "Find" dialog box. In the space provided, enter "width=" and search. For every instance where you see the width set in specific pixels, change it to a percentage. It may take some trial and error to find the right mix, but in the long run, this is your safest bet.

#3 – Long Text

The other major issue that can change a column width is a very long string of unbroken text. Fortunately, this is easy to fix.

In the column that is too wide, look for the longest line of text in the column. If you have some text that goes right up to the edge of the wide column, you've found your culprit. URLs are one of the most common offenders.

If you don't see any long text and have ruled out the sizing problems from above, you may need to employ this neat little trick. Put your mouse over the bottom line of text in the column that is too wide and click and drag you mouse up to the top, highlighting all of the text in that column. Areas without text will not highlight, so if you see any blank spaces that are highlighted, you've fallen victim to the non-breaking space HTML character entity.

Here’s a very quick background on this: HTML ignores more than one consecutive space. When there is more than one consecutive space, HTML inserts a code character. This becomes an issue if there are several excessive spaces in a row because the HTML program views them as a continuous string of text and therefore will not force a break in between them.

Fixing this is also fairly easy. The best way is to go into the editor and just backspace over all of the excess blank space (the highlight trick will work in the editor as well). If this doesn't work, you'll need to search the HTML code again, but this time for " " which is the little HTML code character for a space. If you find it between two other words, just replace it in the HTML with an actual space. If you find a bunch of them in a row, you'll need to get rid of all of them.