I'm trying to add an infobox to a page on my MediaWiki site.
I have this code in my common.css:
.infobox {
border:1px solid #aaaaaa;
background-color:#f9f9f9;
padding:5px;
font-size: 95%;
border-collapse: collapse;
margin-left: 20px;
}
and I have this code in Template:Infobox
<table class="infobox" align="right" bgcolor="#E1E1E1" style="width:20em; font-size:90%; text-align:left; border: 1px green solid;">
<caption style="text-align:center; font-size:140%;"><i><b>{{{name}}}</b></i></caption>
<tr>
<td colspan="2" style="text-align:center;" bgcolor="#E1E1E1">{{{image}}}</td>
</tr>
<tr>
<td colspan="2" bgcolor="#E1E1E1" style="text-align:center;">{{{imagecaption}}}</td>
<tr>
<th>Author</th>
<td>{{{author}}}</td>
</tr>
<tr>
<th>Publisher</th>
<td>{{{publisher}}}</td>
</tr>
<tr>
<th>Publication date</th>
<td>{{{publication}}}</td>
</tr>
<tr>
<th>Illustrator</th>
<td>{{{illustrator}}}</td>
</tr>
<tr>
<th>Genre</th>
<td>{{{genre}}}</td>
</tr>
<tr>
<th>Pages</th>
<td>{{{pages}}}</td>
</tr>
<tr>
<th>ISBN</th>
<td>{{{isbn}}}</td>
</tr>
And lastly this is the code that I inserted into my MediaWiki page:
{{Infobox
| name = The Hitchhiker's Guide to the Galaxy
| image = [[Image:Hhgttg.jpg|150px]]
| image_caption = Movie Poster
| author = Douglas Adams
| country = United Kingdom
| language = English
| series = The Hitchhiker's Guide to the Galaxy
| genre = Science Fiction
| publisher = Pan Books
| release_date = 1979
| media_type = Paperback and hardcover
| pages = 180
| isbn = ISBN 0-330-25864-8
| followed_by = The Restaurant at the End of the Universe
}}
The problem I'm having is that the infobox aligns itself at the bottom-right on my MediaWiki page. I would much rather make it appear on the top-right, like in this page on Wikipedia: http://en.wikipedia.org/wiki/Bill_Gates
What can I add to my code to make this possible?
Wow, that's a weird one, but I think I've managed to figure out the reason:
You forgot to close the <table> inside the template.
Because of that, when the template is expanded at the beginning of the page, all the rest of the page content will end up being placed inside the unclosed HTML table. But, since you did remember to close the <td> and <tr> tags, it gets included outside them.
After parsing a page, MediaWiki runs HTML Tidy on it. When Tidy sees your unclosed table, it does two things to it:
It adds the missing </table> tag to the end of the page.
It sees that there's some content inside the table, but outside the table cells, where no content is supposed to be. It pulls that content out of the table, and places it before the table instead.
The end result is that everything on the page following the unclosed table ends up getting moved up to precede it in the final, tidied HTML. Weird, indeed.
Arguably, HTML Tidy should be smarter about this situation: if it sees an unclosed table with non-table markup following the last table cell, it should close the table there instead of assuming that the following content is also part of the table. It might be worth reporting this as a bug / feature request for Tidy. That said, there are plenty of other ways in which unclosed or otherwise malformed HTML markup in a template could mess up your page, so fixing this one specific case might not make much difference in the grand scheme of things.
And before you ask, yes, the ability to have unmatched HTML in a MediaWiki template is considered a feature, since it lets you do things like:
{{begin quote}}
This is some text wrapped in a fancy quote box by the surrounding templates.
{{end quote}}
Anyway, the fix to this particular problem is simple: just add the missing </table> to your template.