I'm having an odd formatting problem with displaying the userboxes in an
infobox template that I copied off Wikipedia, and I'm hoping that someone
can help me with a fresh pair of eyes.
In summary, the problem is this: I've copied the template for Infobox
user<http://en.wikipedia.org/wiki/Template:Infobox_user>to my wiki (
pansexual.net). It seems to work fine, except for one glitch: if you put
userboxes in the final section, the border for the first userbox is
displayed in a separate div from the userbox itself. This means that the
first userbox is borderless, with a small dot just above the top left
corner. All the following userboxes appear normal. You can see this
happening on my user page <http://pansexual.net/index.php?title=User:Chris>.
So far as I can tell, I've gotten all the necessary templates and css code
from Wikipedia.
The code for the userbox section of the template is:
{{#if:{{{userboxes|}}}|
! colspan="2" style="background-color: {{{color}}}; color:
{{{headingfontcolor}}}; text-align: center;" {{!}} Userboxes
{{!}}-
{{!}} colspan="2" {{!}}
{{{!}} cellspacing="0" cellpadding="0" style="background:
transparent;
vertical-align: middle; text-align: center; font-size: 95%; color:
{{{fontcolor|black}}};"
{{{userboxes|}}}
{{!}}}
}}
And the HTML that the browser generates is:
<tr><th style="background-color: rgb(101, 0, 0); color: white; text-align:
center;" colspan="2"> Userboxes </th>
</tr>
<tr>
<td colspan="2">
<div class="wikipediauserbox" style="border: 1px solid black; margin:
1px;
float: left;"/>
<table cellspacing="0" cellpadding="0" style="background:
transparent none
repeat scroll 0%; -moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial; vertical-align: middle; text-align: center; font-size: 95%;
color: black;"/>
<table cellspacing="0" style="background: rgb(128, 0, 0) none repeat
scroll
0%; width: 238px; -moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial;">
<tbody>
<tr>
<td style="padding: 0pt; background: white none repeat scroll 0%; width:
45px; height: 45px; -moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial; text-align: center; font-size: 14pt; color: black;
line-height: 1.25em; vertical-align: middle;">
<b>
<a class="image" title="Image:Green_condom_icon.png" href="
/index.php?title=Image:Green_condom_icon.png">
<img width="45" height="45" border="0" src="
/images/2/29/Green_condom_icon.png" alt="Image:Green_condom_icon.png"/>
</a>
</b>
</td>
<td style="padding: 4pt; font-size: 10pt; line-height: 1.25em; color: white;
vertical-align: middle;"> This user is a safer sex slut. </td>
</tr>
</tbody>
</table>
<div class="wikipediauserbox" style="border: 2px solid black; margin:
1px;
float: left;">
<table cellspacing="0" style="background: rgb(0, 170, 0) none repeat
scroll
0%; width: 238px; -moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial;">
<tbody>
<tr>
<td style="padding: 0px; background: rgb(221, 221, 221) none repeat scroll
0%; width: 45px; height: 45px; -moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial; text-align: center; font-size: 14pt; color: black;
line-height: 1.25em; vertical-align: middle;">
<b>
<a class="image" title="Image:Polyamoryflagicon.gif" href="
/index.php?title=Image:Polyamoryflagicon.gif">
<img width="45" height="45" border="0" src="
/images/7/7a/Polyamoryflagicon.gif" alt="Image:Polyamoryflagicon.gif"/>
</a>
</b>
</td>
<td style="padding: 4pt; font-size: 12pt; line-height: 1.25em; color: white;
vertical-align: middle;"> This user is polyamorous. </td>
</tr>
</tbody>
</table>
</div>