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 userhttp://en.wikipedia.org/wiki/Template:Infobox_userto 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>