Exploits and bugs

Table overflow hack (layout bug)

Flipnote Studio's browser won't allow for CSS positioning or floats, so having content overlap something else can be difficult. Negative margins are an option, but they require you to know the exact pixel height of the overlap content.

This is where the table overflow hack comes in. We start with a html table with one row containing one column, then make that column span two rows by adding the rowspan="2" attribute.

The content of the table column is rendered as normal, however, when the browser tries to render the next row, it realises that there isn't one, and the table's height gets collapsed to 0 before moving on to the next element.

Because of this, the rest of the page will continue to render as if the table was empty; the table doesn't contribute to the page scroll calculation either.

<table>
    <tr>
        <td rowspan="2">Overlapping content</td>
    </tr>
</table>

...
Content that gets overlapped
...