Overflowed HTML Items

People new to web design are often confused by the term "overflow" - yet it is a core part of understanding how HTML works when designing a web site.

If you receive an error message when publishing a Freeway file (by either publishing or going to Preview or Preview in Browser) which says "OVERFLOWED ITEMS. The following items are overflowed and will not be published" it will almost certainly be because an item is overlapping (or perhaps is even on top of) an HTML item on your page.

The simplest method of laying out your pages in Freeway is by using "table layout". Freeway Express users can only use table layout, but Freeway Pro users can also use the more complex "CSS layout" method which offers greater control of the elements on your page along with greater reliability across browsers and platforms.

When placing graphic items on a page using table layout, Freeway by default will "combine" the graphics so that two or more overlapping graphic items will be treated as a single graphic. If you manually switch off the "Combine Graphics" option in the Inspector, Freeway will "slice" any overlapping graphics into separate parts. HTML items, however, are very different.

An HTML item with content or with graphic effects applied can't be made to combine with other items, and they can't physically slice into separate parts - this is a core HTML issue due to the way HTML is written. Because of this, Freeway will generate an error message which displays in a Publish Problems dialog to alert you that the affected item and its contents or graphic effects will not be published.

Any HTML item which has an overflow problem will display in Freeway without its content or graphic effects, and the item itself will have a large cross through it as seen in the screenshot below.

The problem can usually be fixed very simply by either resizing the item which currently overlaps the HTML item or by moving it away from the HTML item on the page. Once the overlapping item has been resized or moved away from the HTML item, the HTML item's content/graphic effects will be restored. If you now publish the file, you should not receive any warnings.

Note: If you want to use an item (either an HTML item or a graphic item) on top of an existing HTML item, you need to use the new item as a "child" item within the existing HTML item (where the existing HTML is the new item's "parent"). You can read about Parent/Child Relationships in the KnowledgeBase article at http://www.softpress.com/kb/questions/167.

Freeway Pro users can also fix an overflow problem by making the overlapping item a "layer". To do this, select the overlapping item and switch on the Layer option in the Inspector.

If you have a lot of items on your page it can sometimes be difficult to find out which item is overflowing. If this is the case, you should look at the error message in the Publish Problems dialog and make a note of the page and item name (if more than one item is affected there may be more than one in the list). If you now go to that page then click on the header bar of the Site Panel (so it toggles from "Site" to "Page"), the Site Panel will now list all the items on that page - so you can look down the list and select the item(s) mentioned in the error message. When you select the item in the Site Panel list you will see the item selected on the page, so you can see which item is overflowing and which items are overlapping it.

Note: Pro-users may come across another function called "overflow" which is related to Layer items. In this instance, overflow relates to any overset content of a layer item which can be set in the Overflow popup in the Inspector to display as "Visible", "Hidden" or "Scroll" (the latter displays the item on the page with a scrollbar).