Mediawiki css/html infobox creating blank rows

Question

I'm very new to MediaWiki, HTML, CSS, and programming in general. I'm using the ParserFunctions extension for the if statement to delete the rows when its empty. When I use the template, for every two rows that are deleted, it creates 1 blank row on top. Also the issue with 'Spouse(s)' being indented annoys me, is there a way to change that?

All rows Two rows removed css:

{{#css:
  .infobox {
    width: 270px;
    color: #000000;
    line-height: 1.3;
  }
  .infobox td:nth-child(2) {
    text-align: left;
    
  }
  .infobox td:nth-child(1) {
    text-align: left;
    font-weight: bold;
    width: 30%;
    max-width: 100px;
  .infobox tr:first-child {
    display: none;
  }
}}

html:

<div style="border: 1px solid #aaa; background-color: #F8F9FA; padding: 5px; text-align: center; font-size: 90%; float: right; margin: 0 0 10px 10px;">
{| class="infobox"
| <tr><th style="background-color: #99BADD; font-size: 120%; width: 30%; vertical-align: top;" colspan="2">{{{name}}}</th></tr>
| <tr><td colspan="2" style="text-align:center;"><img src="{{{image}}}" alt="{{{alt}}}" /></td></tr>
| <tr><th colspan="2" style="background-color: #CCBBEE;">{{{title}}}</th></tr>
{{#if: {{{birth|}}}
  | <tr><td>Born</td><td>{{{birth}}}<br>{{{birth-place}}}</td></tr>
}}
{{#if: {{{death|}}}
  | <tr><td>Died</td><td>{{{death}}}<br>{{{death-place}}}</td></tr>
}}
{{#if: {{{house|}}}
  | <tr><td>House</td><td>{{{house}}}</td></tr>
}}
{{#if: {{{spouse|}}}
  | <tr><td>Spouse(s)</td><td>{{{spouse}}}</td></tr>
}}
{{#if: {{{issue|}}}
  | <tr><td>Issue</td><td>{{{issue}}}</td></tr>
}}
{{#if: {{{father|}}}
  | <tr><td>Father</td><td>{{{father}}}</td></tr>
}}
{{#if: {{{mother|}}}
  | <tr><td>Mother</td><td>{{{mother}}}</td></tr>
}}
</div>

I tried some css properties but none seem to do anything.

Answer 1

This is because you put enters between the {{#if statements. A double enter is interpreted by mediawiki as an empty paragraph, resulting in some empty space in your table.

You can resolve as follows:

1. Escape your enters:

{{#if: FOO|
Bar
}}<!--
-->{{#if: Baz|
Qux
}}<!--
etc -->

2. Do not write enters:

{{#if: FOO|
Bar
}}<!-- no enter here! -->{{#if: Baz|
Qux
}}<!-- etc -->

Besides this, you are using a weird mix of Mediawiki table-syntax and html table-syntax. I suggest you write everything as either one. In my experience, html table-syntax is more robust.

<div style="border: 1px solid #aaa; background-color: #F8F9FA; padding: 5px; text-align: center; font-size: 90%; float: right; margin: 0 0 10px 10px;">
<table class="infobox">
<tr><th style="background-color: #99BADD; font-size: 120%; width: 30%; vertical-align: top;" colspan="2">{{{name}}}</th></tr>
<tr><td colspan="2" style="text-align:center;"><img src="{{{image}}}" alt="{{{alt}}}" /></td></tr>
<tr><th colspan="2" style="background-color: #CCBBEE;">{{{title}}}</th></tr><!--
-->{{#if: {{{birth|}}}
|<tr><td>Born</td><td>{{{birth}}}<br>{{{birth-place}}}</td></tr>
}}{{#if: {{{death|}}}
|<tr><td>Died</td><td>{{{death}}}<br>{{{death-place}}}</td></tr>
}}{{#if: {{{house|}}}
  | <tr><td>House</td><td>{{{house}}}</td></tr>
}}{{#if: {{{spouse|}}}
| <tr><td>Spouse(s)</td><td>{{{spouse}}}</td></tr>
}}{{#if: {{{issue|}}}
| <tr><td>Issue</td><td>{{{issue}}}</td></tr>
}}{{#if: {{{father|}}}
| <tr><td>Father</td><td>{{{father}}}</td></tr>
}}{{#if: {{{mother|}}}
| <tr><td>Mother</td><td>{{{mother}}}</td></tr>
}}</table>
</div>