Hello,
Recently I found a problem that I cannot solve on my own. For some reason the username, when too long and when it consist out of two parts, can push the avatar of the member UP. I've also looked in different browsers and for some reason it is displayed the way I want it to in Internet Explorer. So I'm not sure if it can be fixed because of that.
Another thing is that the username gets clipped off when it's too long. I do, however, not want there to be a possiblity of a username stretching out the page because it's too long.
Here are some pictures to illustrate what I want:
Here is the HTML and CSS used:
Hopefully someone can help me with this problem!
Greetings,
Hert
Recently I found a problem that I cannot solve on my own. For some reason the username, when too long and when it consist out of two parts, can push the avatar of the member UP. I've also looked in different browsers and for some reason it is displayed the way I want it to in Internet Explorer. So I'm not sure if it can be fixed because of that.
Another thing is that the username gets clipped off when it's too long. I do, however, not want there to be a possiblity of a username stretching out the page because it's too long.
Here are some pictures to illustrate what I want:
- How it is now:
- The way I want it to be displayed:
- Username clipping:
Here is the HTML and CSS used:
- Code:
/*---------------------------- MEMBERLIST */
.avatar.mini, .avatar.mini img {
height: 200px;
width: 150px;
border: 0px;
}
.memberz { width: 170px;
overflow: hidden;
}
.lijn {
width: 170px;
border-bottom: 1px dotted #342f2f;
text-align: right;
}
- Code:
<tr>
<tbody>
<td align="center">
<!-- BEGIN memberrow -->
<div style="display: inline-block;">
<div class="avatar mini" width="150px" height="200px" style="border:10px solid #342f2f; margin-right: 10px; margin-left: 10px; display: block;">
<a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
<span class="gen"><div class="memberz"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<div class="lijn" width="150px"></div>
{memberrow.LASTVISIT}.<br />
{memberrow.PM_IMG} </span></div>
</div>
<!-- END memberrow -->
</td>
</tbody>
</tr>
Hopefully someone can help me with this problem!
Greetings,
Hert