MyBB Community Forums

Full Version: Postbit mod looks misaligned only in Chrome
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello community

Recently I made a mod on my postbit, and it looks just fine in Opera, Firefox and IE, but not in Chrome:

[Image: 109opera.png] ................... [Image: 713ff.png]
Opera ............................................... Firefox


[Image: 852explorer.png] ................... [Image: 675chrome.png]
Explorer ............................................... Chrome


I can't figure exactly why is this happening with Chrome, but this is the CSS related:

.caja-usuario {
	float: left;
}

.caja-usuario-cabecera {
	background: url(images/mycleanorange/postbit.png) top left no-repeat;
	width: 200px;
	height: 11px;
}

.caja-usuario-contenido {
	background: url(images/mycleanorange/contenido-postbit.png) top left repeat-y;
	width: 200px;
	height: auto;
}

.caja-usuario-contenido2 {
	background: url(images/mycleanorange/postbit-datos.png);
              margin-left:-15px;
	width: 200px;
	height: 98px;
	font-family: Verdana;
	font-size: 13px;
}

.caja-usuario-pie {
	background: url(images/mycleanorange/postbit.png) bottom left no-repeat;
	width: 200px;
	height: 12px;
}

.caja-usuario-datos {
	background: #fff url(images/mycleanorange/fondo-postbit.png) repeat-x;
	width: 170px;
	color: #373737;
	margin: 0 auto;
	padding: 0 10px;
	font-size: 13px;
}

To make this mod I added the .caja-usuario-contenido2 class, and had to set a margin of -15 because in other way it looks misaligned in O, FF and IE, just as it looks in Chrome now.
However, if that margin is removed, Chrome doesn't look affected, but the other browsers do


This is the postbit template:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
	<tr>
		<td>
			<div class="caja-usuario">
				<div class="caja-usuario-cabecera"></div>
				<div class="caja-usuario-contenido">
					<div class="caja-usuario-datos" align="center">
						<strong><span class="largetext"><a href="{$post['profilelink_plain']}" id="miembro_{$post['pid']}">{$post['username_formatted']}<img src="{$theme['imgdir']}/arrow_down.gif" alt="v" style="vertical-align: middle;" /></a></span></strong><br />
						<div id="miembro_{$post['pid']}_popup" class="popup_menu smalltext" style="display: none;">
							<div class="popup_item_container"><a href="{$post['profilelink_plain']}" class="popup_item">{$post['username_formatted']}</a></div>
							{$post['button_email']}
							{$post['button_pm']}
							{$post['button_find']}
							{$post['button_www']}
						</div>
						<script type="text/javascript">if(use_xmlhttprequest == "1"){new PopupMenu("miembro_{$post['pid']}");}</script>
                                                                                     <span class="smalltext">
							{$post['usertitle']}<br/>UserID: {$post['uid']}<br />
							{$post['userstars']}<br />
							{$post['useravatar']}<br />
							<img src="/images/pb/Nacionalidad/{$post['fid1']}.png" title="{$post['fid1']}" />  <img src="/images/pb/Sexo/{$post['fid3']}.png" title="{$post['fid3']}" />  {$post['onlinestatus']}<br/><br/>
				<div class="caja-usuario-contenido2" align="left">
							<div align="center">{$post['user_details']}</div><br />
				</div><br/>
							{$post['groupimage']}<br />
						</span>
					</div>
				</div>

I hope somebody could help with this. Thanks in advance