Mini Profile in PMs Issue

[Former Member]

Im having an issue with the mini profile i have placed in. It works fine in threads and posts, but it has a glitch when it comes to PMs only :/ Im not sure what is wrong since the mini profile works perfectly in posts but just not in PMs.  The top of the gif shows at the bottom which its not suppose to unless you hover over it and the whole thing pops up but this is how it is without hovering over it :/ Can someone help? Here's a screen shot in a PM:

[Craig]

Hi

Unfortunately, you did not provide a link to the forum in question. Are you able to post the codes used to produce the mini profiles like that please

[Former Member]

Its on MM and the issue is in messages :/ But this is the site Here And i sure can The codes are:


Mini profile temp:



{if $[user.is_member]}
<div class="$[miniprofile_class]" style="width:270px;text-align:center;">
<div class="miniprofilename">$[user]</div>
<div class="minibg" style="border:10px solid #303030;border-top:5px solid #303030;border-bottom:5px solid #303030;margin:0px;">
<div style="width:250px; height:350px;border-radius:0px;background-image: url('http://i.imgur.com/bB2DrFr.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "250x350 Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;"></div>
<div class="minibg2"></div><div class="miniinfo">
<table style="border-collapse:separate;border-spacing:0px;">
<tbody>
<tr>
<td width="155px;">
<div style="margin-left:5px;margin-top:-85px;border:7px solid #303030;border-radius:100px;width:125px;height:125px;position:absolute;">
$[user.avatar]</div>
</td>
<td>
<div class="miniprofiletext" style="margin-left:-27px;width:105px;height:15px;margin-top:0px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Application"}
<span class="$[user.mini_custom_field.content_class]">
<a href="$[user.mini_custom_field.value]" style="font-family:courier new;font-size:11px;">Application</a>
</span>
{/if}
{/foreach}
</div>
<div class="miniprofiletext" style="margin-left:-30px;margin-top:10px;height:15px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Plotter"}
<span class="$[user.mini_custom_field.content_class]">
<a href="$[user.mini_custom_field.value]" style="font-family:courier new;font-size:11px;">Plotter</a>
</span>
{/if}
{/foreach}
</div>
<div class="miniprofiletext" style="margin-left:-35px;margin-top:10px;height:15px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Tracker"}
<span class="$[user.mini_custom_field.content_class]">
<a href="$[user.mini_custom_field.value]" style="font-family:courier new;font-size:11px;">Tracker</a>
</span>
{/if}
{/foreach}
</div>
{if $[user.is_online]}
<div style="margin-top:18px;margin-bottom:-5px;margin-left:-30px;font-family:georgia;font-size:16px;font-style:italic;">Resident is online <span style="color:#94ED7B;font-size:10px;">?</span></div>
{else}
<div style="margin-top:18px;margin-bottom:-5px;margin-left:-30px;font-family:georgia;font-size:16px;font-style:italic;">Resident is offline <span style="color:#F26161;font-size:10px;">?</span></div>
{/if}
</td>
</tr>

<tr>
<td colspan="2" valign="middle" style="vertical-align:middle;height:75px;">
<div style="background-color:#c7c7c7;padding-bottom:9px;padding-top:9px;padding-left:13px;padding-right:13px;margin:10px;margin-top:0px;min-height:25px;overflow:hidden;position:absolute;margin-top:0px;">
<table height="25px;">
<tr>
<td valign="middle" style="vertical-align:middle;height:25px;">
{if $[user.personal_text.message]}
$[user.personal_text]
{else}
<span style="font-family:verdana;font-size:10px;text-align:center;">Never say anything that doesn't improve on silence.</span>
{/if}
</td>
</tr>
</table>
</div>
<div style="font-family:georgia;font-size:65px;margin-left:-220px;margin-top:-15px;{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Quotation Hex Color Code"}color:#$[user.mini_custom_field.value];{/if}{/foreach};position:relative">“</div>
</td>

</tr>
<tr>
<td colspan="2">
<div style="font-family:oswald;font-size:18px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;position:relative;margin-top:-10px;">$[user.custom_title]</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
<div class="miniprofilebox" style="margin-left:13px;">
{if $[user.posts] == -1}N/A{else}Posts: $[user.posts]{/if}
</div>
</td>
<td>
<div class="miniprofilebox">
Likes: {if $[user.likes] == -1}N/A{else}$[user.likes]{/if}

</div>
</td>
</tr>
<tr>
<tr>
<td>
<div class="miniprofilebox" style="margin-left:13px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Age"}
$[user.mini_custom_field.value]
{/if}
{/foreach}
</div>
</td>
<td>
<div class="miniprofilebox">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Authored by"}
<span class="$[user.mini_custom_field.content_class]" style="font-family:courier new;color:#b6b6b6;letter-spacing:1px;font-size:10px;">$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="miniprofilebox" style="margin-left:13px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Trait"}
$[user.mini_custom_field.value]
{/if}
{/foreach}
</div>
</td>
<td>
<div class="miniprofilebox">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Occupation"}
$[user.mini_custom_field.value]
{/if}
{/foreach}
</div>
</td>
</tr>
<tr>
<td>
<div class="miniprofilebox" style="margin-left:13px;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Relationship Status"}
$[user.mini_custom_field.value]
{/if}
{/foreach}
</div>
</td>
<td>
<div class="miniprofilebox">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Mate"}
$[user.mini_custom_field.value]
{/if}
{/foreach}
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div style="width:270px;background-color:#303030;">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Music"}
<div class="player" style="position:relative;top:3px;margin-left:0px;"><object width="260" height="22" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#404040" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=000000&loadingcolor=212121&buttoncolor=212121&slidercolor=212121;" name="FlashVars">
</object></div>
{/if}
{/foreach}
</div>
{if $[user.group]}
<div align="center" class="miniprofilename">$[user.group.name]</div>
{else}
<div align="center" class="miniprofilename">No Group</div>
{/if}
</div>
{else}
<div class="$[miniprofile_class]" style="width:270px;text-align:center;">
<div class="miniprofilename">$[user]</div>
<div class="minibg" style="border:10px solid #292929;border-top:5px solid #292929;border-bottom:5px solid #292929;margin:0px;">
<div style="width:250px; height:350px;border-radius:0px;background-image: url('http://i.imgur.com/bB2DrFr.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "250x350 Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:initial;"></div>
</div>
<div align="center" class="miniprofilename">Guest</div>
</div>
{/if}



In CSS/Style sheet: :


/*MINI PROFILE*/
.minibg {
position: relative;
overflow: hidden;
width: 250px;
height: 350px;
margin: 0 auto; }

.miniinfo {
text-align:center!important;
position: absolute;
top:360px;
width:250px;
height:330px;
background-color:#5a5757;
margin-top:30px;
transition: all 1s ease-in-out 0.2s;
-webkit-transition: all 1s ease-in-out 0.2s;
-moz-transition: all 1s ease-in-out 0.2s;
-o-transition: all 1s ease-in-out 0.2s;
-ms-transition: all 1s ease-in-out 0.2s; }

.minibg:hover .miniinfo { top:0px;}

.minibg2 {
position: absolute;
background-color: #303030;
width: inherit;
height: inherit;
top: 0px;
transition: all 1s ease-in-out 0.2s;
-webkit-transition: all 1s ease-in-out 0.2s;
-moz-transition: all 1s ease-in-out 0.2s;
-o-transition: all 1s ease-in-out 0.2s;
-ms-transition: all 1s ease-in-out 0.2s;
opacity: 0; }

.minibg:hover .minibg2 { opacity: .7; }

.miniprofilename {
color:#cccccc;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
padding:3px;
margin-bottom:0px;
background-color:#404040;
font:16px century gothic!important;
border:5px solid #303030;
}
.miniprofilename a {
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font:16px century gothic!important;
}
.miniprofilename a:hover {
color:#cccccc;
}
.miniprofilebox {
background-color:#303030;
padding:4px;
margin:2.5px;
width:100px;
font-size:10px;
height:12px;
text-align:center;
font-family:courier new!important;
text-transform:uppercase;
letter-spacing:1px;
}
.miniprofilebox2 {
background-color:#262626;
padding:4px;
width:80px;
font-size:10px;
text-align:center;
font-family:courier new!important;
text-transform:uppercase;
letter-spacing:1px;
}
.miniprofiletext {
font-family:courier new;
font-size:12px;
text-transform:uppercase;
background-color:#303030;
padding:4px;
width:100px;
}



And this also in CSS/Style sheet:

.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 125px; width: 125px; min-height:125px; min-width:125px; max-height:125px; max-width:125px; border-radius:100px;}
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default img, .avatar_size_default default { max-height: 125px; max-width: 125px; border-radius:100px; min-height:125px; min-width:125px;}

And this too replacing a line:

.posts .post .left-panel { width: 280px; vertical-align: top; }

[Brian]

Hi, @xemogirlx.

Add this to your style sheet.

.messages .item .mini-profile td { vertical-align: middle; }

[Former Member]

Brian, Thank you again! Youre a life saver