So, I'm over at the Kirby Wiki, and I'm making a unified system for displaying sprites. Each character that has sprites has different kinds that need to be displayed and may appear in several different games. I need to be able to display sprites with alternate palettes, miscellaneous sprites, and unused sprites interchangeably. This works perfectly when I only have alternate palettes as extra, like so:
<div style="margin-top: 3px; margin-bottom: 3px; float: left;">
<table class="infobox {{#ifeq:{{{noclear|}}}|1|noclear|}} br-5px {{{infobox_class|}}} {{#if:{{{color2|}}}||alpha75}}" style="background-color: {{{color1|}}}; border: 2px solid {{{bordercolor|#000000}}}">
<!-- Title -->
<tr><th colspan="100%" class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-top: 1px solid {{{bordercolor|#000000}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; font-size: 120%;"><div align="center">Sprites</div></th></tr>
<tr><th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Game'''</div></th>
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Main'''</div></th>
{{#if:{{{alt|}}}|
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Alternate Palette(s)'''</div></th>
}}
</tr>
<!-- Game 1 -->
<tr><td class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}};"><div align="center">{{PortalLogo|size=80x50px|{{{game1|}}}}}</div></td>
<td class="bgi-matte-lite" style="border-bottom: 1px solid {{{color2|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">{{{game1main|}}}</div></td>
{{#if:{{{alt|}}}|
<td class="bgi-matte-lite" style="border-bottom: 1px solid {{{color2|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">{{{game1alt|}}}</div></td>
}}
</tr>
<!-- Game 2 -->
{{#if: {{{game2|}}}|
<tr><td class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}};"><div align="center">{{PortalLogo|size=80x50px|{{{game2|}}}}}</div></td>
<td class="bgi-matte-lite" style="border-bottom: 1px solid {{{color2|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">{{{game2main|}}}</div></td>
{{#if:{{{alt|}}}|
<td class="bgi-matte-lite" style="border-bottom: 1px solid {{{color2|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">{{{game2alt|}}}</div></td>
}}
</tr>
}}
</table>
</div>
The main part of this being {{#if:{{{alt|}}}|...}}
, which works perfectly and does exactly what I want it to.
Now, when I added this to the template:
<tr><th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Game'''</div></th>
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Main'''</div></th>
{{#if:{{{alt|}}}|
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Alternate Palette(s)'''</div></th>
}}
{{#if:{{{misc|}}}|
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Misc.'''</div></th>
}}
{{#if:{{{unused|}}}|
<th class="bgi-gloss-lite" style="background-color: {{{color2|#FFFFFF}}}; border-bottom: 1px solid {{{bordercolor|#000000}}}; border-right: 1px solid {{{color2|#000000}}};"><div align="center">'''Unused'''</div></th>
}}
</tr>
A large, inexplicable space is added above the table. I know it is because of the two new #if statements because upon removal of them, the space disappears. Also, oddly, giving a value to either misc or unused causes the space to disappear as well. Anyone know how to fix this/have any idea why this is happening? Any help is greatly appreciated!