MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > Postbit width affecting post contents
Full Version: Postbit width affecting post contents
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

hexote

2018-10-07, 04:35 AM
Hi, I'm having a pretty frustrating issue with my theme that I was hoping someone could troubleshoot for me. I hope you can understand that I don't want to post the link to my board (I am willing to send it over PM if you can help!), but I'll try to elucidate the issue I'm facing with screenshots and the stylesheet where I believe the problem is deriving from

So when I make my postbit_classic width wider than 15%, the post content gets shifted underneath instead of aligning to the right of it like it should. I would like for the width to be 20%, as it needs to accommodate avatars that are up to 200 x 300 pixels in dimension. 

Currently running version 1.8.18.

What my board looks like when I adjust the width to 20%:
[Image: Screen_Shot_2018_10_07_at_12_05_29_AM.png]

As you can see, the post content ("testing prefix") is underneath the postbit. Ideally the postbit should fill the entire left side, instead of floating just halfway down.

A photoshopped mockup of how I'm trying to make it look (ignore the colors, I took the screenshot on a previous theme): 

[Image: halp.png]

I'd also like a tcat bar between the thead and post content/postbit that displays the post time and quote button. How would I go about doing this?

Thank you for any help. Happy to provide additional info if needed.

My postbit_classic template:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}"> 
<span class="post_date">{$post['postdate']} </span> 
<div class="post_author scaleimages" width: 25%;>
<center><strong><span style="font-size:22px; font-family:georgia; letter-spacing:-1px; font-weight:bold;">{$post['profilelink']}</span></strong>
<br>{$post['groupimage']} 
{$post['usertitle']}<br /></center>
{$post['useravatar']}
<div class="author_information" >
<span class="smalltext">
</span>
</div>
<div class="author_statistics">
<center>{$post['fid21']}</center>
<p><center><strong><span style="font-size:11px; font-variant:small-caps; letter-spacing:.5px;">{$usergroup['title']}</span></strong></p>

{$post['user_details']}  

</div>
</div>
<div class="post_content">
<div class="post_head">
{$post['posturl']}
{$post['icon']}
    <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
{$post['subject_extra']}
</div>
<div class="post_body scaleimages" id="pid_{$post['pid']}" min-height:auto;>
{$post['message']}
</div>
{$post['attachments']}
{$post['signature']}
<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</div>
<div class="post_controls">
<div class="postbit_buttons author_buttons float_left">
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
</div>
<div class="postbit_buttons post_management_buttons float_right">
{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
</div>
</div>
</div>

My global.css:

@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');
@import url('https://fonts.googleapis.com/css?family=Srisakdi');
@import url('https://fonts.googleapis.com/css?family=Karla');



body {
background: url('http://i66.tinypic.com/qzg45s.png');
color: #333;
text-align: center;
line-height: 1.431;
margin: 0;
font-family: 'Karla', sans-serif;
font-size: 14px;
overflow-y: scroll;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

a:link {

color: #4c1104;
text-decoration: none;
}

.myforum a:link {
  color: #4c1104!important;
      font-family: georgia!important;
  letter-spacing:-1px; 
      font-size: 18px!important;
  font-weight:bold;

}

a:visited {
color: #4c1104;
text-decoration: none;
}

a:hover,
a:active {
color: #4c1104;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#container {
background: #fff;
color: #333;
text-align: left;
line-height: 13px;
width: 950px;
padding: 10px;
border: 1px solid #fff;
margin: 10px auto;
letter-spacing: .4px;
font-family: 'Karla', sans-serif;
font-size: 12px;
}

.wrapper {
min-width:900px!important;
max-width: 1500px;
margin: auto auto;
}

#logo {
background: #fff;
padding: 0px;
padding-bottom: -10px;
}

div.logo { 
background: url('http://i66.tinypic.com/2czv8xy.png') repeat-x top right;

}
#content {
width: auto !important;
padding: 10px 10px;
overflow: hidden;
}

#header ul.menu {
margin: 0;
padding: 0;
list-style: none;
}

#header ul.menu li {
margin: 0 7px;
display: inline;
}

#header ul.menu li a {
padding-left: 20px;
background-repeat: no-repeat;
display: inline-block;
line-height: 16px;
}

#logo ul.top_links {
font-weight: bold;
text-align: left;
margin: -25px 5px 0 0;
}

#logo ul.top_links a.search {
background-position: 0 0;
}

#logo ul.top_links a.memberlist {
background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
background-position: 0 -40px;
}

#logo ul.top_links a.help {
background-position: 0 -60px;
}

#logo ul.top_links a.portal {
background-position: 0 -180px;
}

#panel .upper a.logout {
font-weight: bold;
background: right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
margin-top:2em;

}

#panel .upper a.login,
#panel .upper a.lost_password {
background: 0 -80px no-repeat;
padding-left: 10px;
margin-left: 10px;
font-weight: bold;
margin-top:2em;
}

#panel .upper a.register {
background: right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
margin-top:2em;
}

#panel .lower ul.panel_links {
float: left;
}

#panel .lower ul.panel_links a.usercp {
    background-position: 0 -110px;
}

#panel .lower ul.panel_links a.modcp {
background-position: 0 -120px;
}

#panel .lower ul.panel_links a.admincp {
background-position: 0 -150px;
}

#panel .lower ul.user_links {
float: right;
}

#panel .lower ul.user_links li a {
padding: 0;
background-image: none;
}

#panel .upper {
opacity: 0.4;
    filter: alpha(opacity=40);
color: #373737;
border-top: 0px solid #444;
border-bottom: 0px solid #000;
padding: 7px;
clear: both;
margin-top:-4em;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
color: #282828;
}

#panel .lower {
color: #999;
border-top: 0px solid #fff;
border-bottom: 0px solid #ccc;
padding: 5px;
margin-top:2em;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
color: #666;
}

#search {
border: 0;
padding: 0;
margin: 0;
float: right;
vertical-align: middle;
}

#search input.button,
#search input.textbox {
border-color: #000 dotted;
}

#search input.button {
background: #0066a2 url(http://i67.tinypic.com/2mniz9v.png) top left repeat-x;
color: #fff;

}

#search input {
margin: -3px 0;
}

#quick_login .remember_me input {
vertical-align: middle;
margin: -3px 0 0 5px;
}

#footer {
clear: both;
}

#footer ul.menu {
margin: 0;
padding: 0;
list-style: none;
}

#footer ul.menu li {
margin: 0 5px;
display: inline;
}

#footer .upper {
background: #e0e0e0;
border-top: 0px solid #bbb;
border-bottom: 0px solid #bbb;
padding: 6px;
font-size: 12px;
overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
color: #777;
}

#footer .upper .language {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .language select {
border-color: #ccc;
}

#footer .upper .theme {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .theme select {
border-color: #ccc;
}

#footer .upper ul.bottom_links {
float: left;
margin: 4px 0 0 0;
}

#footer .lower {
color: #666;
padding: 6px 6px 12px 6px;
overflow: hidden;
font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
color: #444;
font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
color: #333;
text-decoration: underline;
font-weight: bold;
}

#footer .lower #current_time {
float: right;
color: #888;
}

#debug {
float: right;
text-align: right;
margin-top: 20px;
font-size: 11px;
}

.scaleimages img {
max-width: 100%;
overflow: hidden; 
height: 100%; 

}

.forum_status {
height: 40px;
width: 40px;
background: url(http://i64.tinypic.com/depw0j.png) no-repeat 0 0;
display: inline-block;
}

.forum_on {
background-position: 0 0;
}

.forum_off {
height: 40px;
width: 40px;
background-position: 0 -30px;
background: url(http://i68.tinypic.com/2cx9ru8.png) no-repeat 0 0;
}

.forum_offclose {
height: 40px;
width: 40px;
background-position: 0 -30px;
background: url(http://i68.tinypic.com/2cx9ru8.png) no-repeat 0 0;
}

.forum_offlink {
background-position: 0 -90px;
}

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
background-position: 0 -10px;
}

.subforum_minioffclose {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}

table {
color: #333;
font-size: 13px;
}

.tborder {
background: #fff;
width: 100%;
margin: auto auto;
border: 0px solid #ccc;
padding: 1px;
}

.tfixed {
table-layout: fixed;
word-wrap: break-word;
}

.thead {
background: #612c14 top left repeat-x;
color: #ffffff;
font-family:georgia; 
font-size: 14px; 
font-weight: lighter; 
letter-spacing: -.5px; 
text-transform: lowercase; 
border-bottom: 1px solid #263c30;
padding: 8px;
}

.thead a:link {
color: #ffffff;
text-decoration: none;
}

.thead a:visited {
color: #ffffff;
text-decoration: none;
}

.thead a:hover,
.thead a:active {
color: #ffffff;
text-decoration: underline;
}

.tcat {
background: #7c9292;
text-transform: lowercase; 
font-variant: small-caps;
letter-spacing:.5px; 
color: #ffffff;
font-size: 10px; 
font-weight: lighter; 
border: 1px solid #fff;
padding: 5px;
}

.tcat a:link {
color: #fff;
}

.tcat a:visited {
color: #fff;
}

.tcat a:hover,
.tcat a:active {
color: #fff;
}

.trow1 {
background: #e0e0e0;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}

.trow2 {
background: #e0e0e0;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}

.no_bottom_border {
border-bottom: 0;
}

.post.unapproved_post {
background: #e0e0e0;
}

.post.unapproved_post .post_author {
border-bottom-color: #e0e0e0;
}

.post.classic.unapproved_post .post_author {
border-color: #e0e0e0;
}

.post.unapproved_post .post_controls {
border-top-color: #e0e0e0;
}

.trow_deleted,
.post.deleted_post {
background: #E8DEFF;
}

.trow_selected,
tr.trow_selected td {
background: #c2c2c2;
color: #333;
border-right-color: #F7E86A;
border-bottom-color: #F7E86A;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
color: #333;
}

.trow_sep {
background: #ddd;
color: #333;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 9px;
font-weight: lighter;
}

.tfoot {
border-top: 1px solid #fff;
padding: 6px;
background: #ddd;
color: #666;
}

.tfoot a:link {
color: #444;
text-decoration: none;
}

.tfoot a:visited {
color: #444;
text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
color: #444;
text-decoration: underline;
}

.thead input.textbox,
.thead select {
border: 1px solid #263c30;
}

.bottommenu {
background: #e0e0e0;
color: #333;
border: 1px solid #4874a3;
padding: 10px;
}

.navigation {
color: #494949;
font-size: 15px;
font-family: Georgia;
letter-spacing:-.5px;
font-weight:bold;
}

.navigation a:link {
text-decoration: none;
color: #494949;
font-size: 15px;
font-family: georgia;
letter-spacing:-.5px;
font-weight:bold;
}

.navigation a:visited {
color: #494949;
font-size: 12px;
font-family: georgia;
letter-spacing:-.5px;
font-weight:bold;
}

.navigation a:hover,
.navigation a:active {
text-decoration: underline;
}

.navigation .active {
color: #494949;
font-size: 12px;
font-family: georgia;
letter-spacing:-.5px;
text-align: justify; 
font-weight:bold;
}

.smalltext {
font-size: 11px;
font-family: 'Karla', sans-serif;
color: #0b0b0b;

}

.cfont {
font-family:"Century Gothic", sans-serif;
line-height:9px;
font-size:9px;
}

.largetext {
font-size: 16px;
font-weight: bold;
}

fieldset {
padding: 12px;
border: 1px solid #ddd;
margin: 0;
}

fieldset.trow1,
fieldset.trow2 {
border-color: #bbb;
}

fieldset.align_right {
text-align: right;
}

input.textbox {
background: #ffffff;
color: #333;
border: 1px solid #ccc;
padding: 3px;
outline: 0;
font-size: 13px;
font-family: 'Karla', sans-serif;
}

input.textbox.portal_search {
    width: 68%;
}

textarea {
background: #e0e0e0;
color: #333;
border: 1px solid #ccc;
padding: 2px;
line-height: 1.4;
outline: 0;
font-family: 'Karla', sans-serif;
font-size: 13px;
}

select {
background: #ffffff;
padding: 3px;
border: 1px solid #ccc;
outline: 0;
font-family: 'Karla', sans-serif;
font-size: 13px;
}

button,
input.button {
padding: 3px 8px;
cursor: pointer;
font-variant: small-caps;
text-transform: uppercase;
font-size: 9px;
border: 1px dotted #484848;
background-color: #cbcbcb;
color: #333;
outline: 0;
}

button:hover,
input.button:hover {
border-color: #aaa;
}

form {
margin: 0;
padding: 0;
}

input.error, textarea.error, select.error {
border: 1px solid #f30;
color: #f30;
}

input.valid, textarea.valid, select.valid {
border: 1px solid #0c0;
}

label.error {
color: #f30;
margin: 5px;
padding: 0px;
display: block;
font-weight: bold;
font-size: 11px;
}

form #message {
width: 500px;
box-sizing: border-box; 

}

.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}

.editor_control_bar {
background: #fff;
border: 1px solid #ccc;
}

.post .editor_control_bar {
background: #e0e0e0;
}

.popup_menu {
background: #fff;
border: 1px solid #ccc;
}

.popup_menu .popup_item {
background: #e0e0e0;
color: #333;
}

.popup_menu .popup_item:hover {
background: #0072BC;
color: #fff;
}

.trow_reputation_positive {
background: #ccffcc;
}

.trow_reputation_negative {
background: #ffcccc;
}

.reputation_positive {
color: green;
}

.reputation_neutral {
color: #444;
}

.reputation_negative {
color: red;
}

.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}

._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}

._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}

._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}

img {
border: none;
}

img.attachment {
border: 1px solid #E9E5D7;
padding: 2px;
}

hr {
background-color: #000000;
color: #000000;
height: 1px;
border: 0px;
}

.clear {
clear: both;
}

.float_left {
float: left;
}

.float_right {
float: right;
}

.hidden {
display: none;
float: none;
width: 1%;
}

.hiddenrow {
display: none;
}

.selectall {
background: #FFFBD9;
border-bottom: 1px solid #F7E86A;
color: #333;
text-align: center;
}

.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}

.tcat_menu > .expcolimage {
margin-top: 0;
}

blockquote {
border: 1px solid #ccc;
margin: 0;
background: #fff;
padding: 10px;
}

blockquote cite {
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

blockquote cite > span {
float: right;
font-weight: normal;
font-size: 12px;
color: #666;
}

blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}

.codeblock {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
}

.codeblock .title {
border-bottom: 1px solid #ccc;
font-weight: bold;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px;
}

.smilie {
vertical-align: middle;
}

.smilie_pointer {
cursor: pointer;
}

.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}

.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}

.popup_menu .popup_item {
display: block;
padding: 4px;
white-space: nowrap;
text-decoration: none;
}

.popup_menu a.popup_item:hover {
text-decoration: none;
}

.subject_new {
font-weight: bold;
}

.highlight {
background: #FFFFCC;
padding-top: 3px;
padding-bottom: 3px;
}

.pm_alert {
background: #FFF6BF;
border: 1px solid #FFD324;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}

.red_alert {
background: #FBE3E4;
border: 1px solid #A5161A;
color: #A5161A;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
word-wrap: break-word;
}

.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert a:active {
color: #A5161A;
}

.high_warning {
color: #CC0000;
}

.moderate_warning {
color: #F3611B;
}

.low_warning {
color: #AE5700;
}

.imminent_banned {
color: #880000;
}

.high_banned {
color: #FF0000;
}

.moderate_banned {
color: #FF6600;
}

.low_banned {
color: #008000;
}

.online {
color: #15A018;
}

.offline {
color: #C7C7C7;
}

div.error {
padding: 5px 10px;
border: 2px solid #FFD324;
background: #FFF6BF;
font-size: 12px;
}

div.error p {
margin: 0;
color: #333;
font-weight: normal;
}

div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #C00;
background: url(images/error.png) no-repeat 0;
}

div.error ul {
margin-left: 24px;
}

.pagination {
font-size: 11px;
padding-top: 10px;
margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
padding-top: 0;
}

.pagination .pages {
font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
padding: 3px 6px;
margin-bottom: 3px;
}

.pagination a {
background: #e0e0e0;
border: 1px solid #ccc;
}

.pagination .pagination_current {
background: none;
color: #333;
border: none;
font-weight: bold;
}

.pagination a:hover {
background: #0072BC;
color: #fff;
border-color: #263c30;
text-decoration: none;
}

.pagination .go_page img {
margin-bottom: -4px;
}

.drop_go_page {
background: #e0e0e0;
padding: 4px;
}

.pagination_breadcrumb {
background-color: #e0e0e0;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}

.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}

.thread_legend,
.thread_legend dd {
margin: 0;
padding: 0;
}

.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}

.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
margin: 0;
padding: 0;
}

.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 7px;
}

.forum_legend dt {
margin-right: 10px;
float: left;
}

.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

#posts_container {
padding: 0; 
}

.ignored_post {
border-top: 3px solid #333;
padding: 15px;
}

.ignored_post .show_ignored_post {
margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
background-position: 0 -400px;
}

.deleted_post_hidden {
border-top: 2px solid #ccc;
padding: 15px;
}

.deleted_post_collapsed {
border-top: 3px solid #333;
padding: 15px;
}

.deleted_post_collapsed .show_deleted_post {
margin-top: -15px;
}

.deleted_post_collapsed .show_deleted_post a.button span {
background-position: 0 -400px;
}

.post { 
overflow: hidden; 
}

.post.classic {
padding-top: 15px;
}

.post .post_author {
padding: 1em;
overflow: hidden; 
}

.post.classic .post_author {
width: 20%;
border: 1px solid #ddd;
float: left;
margin: 0 1% 15px 0;
padding: 5px 1%;
}

.post .post_author .buddy_status {
vertical-align: middle;
margin-top: -4px;
}

.post .post_author div.author_avatar {
float: left;
margin-right: 1em;
min-width: 70px;
max-width: 90px;
}

.post.classic .post_author div.author_avatar {
float: none;
margin: 0px auto 1em;
max-width: 90px;
text-align: center;
min-width: 70px;
}

.post .post_author div.author_avatar img {
border-radius: 1000px;
width: auto;
height: auto;
background: #fff;
}

.post .post_author div.author_information {
float: left;
padding: 6px 8px; 
}

.post.classic .post_author div.author_information {
float: none;
font-family: inherit;
padding: 0;
text-align: center; 
}

.post .post_author div.author_statistics {
float: right;
font-size: 12px;
padding: 14px 18px 12px 16px;
color: #666;
font-family: inherit;
line-height: 1.4; 
}

.post .post_author div.author_statistics_default {
background: #eee;
float: right;
font-size: 12px;
padding: 11px 18px 6px 16px;
color: #666;
font-family: inherit;
line-height: 1.4; 
}

.post.classic .post_author div.author_statistics {
margin: 7px 0 0 0;
float: none; 
}

.post .post_head {
border-bottom: 1px solid #eee;
font-size: 11px;
padding-bottom: 12px;
margin-bottom: 7px; 
}

.post .post_head span.post_date { 
color: #888; 
font-size: 13px;
}

.post .post_head span.edited_post {
font-size: 10px;
color: #999;
}

.post .post_head span.edited_post a { color: #666; }

.post_body {
font-size: 12px;
padding: 12px 0;
}

.post.classic .post_content {
float: left;
width: 79%;
padding: 0 1% 5px 1%;
}

.post_content { 
padding: 18px 20px 10px 20px; }

.post_content .signature {
margin-top: 5px;
border-top: 1px dotted #ddd;
padding: 10px 0 4px 0;
}

.post .post_meta {
margin: 4px 0; 
font-size: 12px;
color: #999; 
}


.post .post_meta a:link,
.post .post_meta a:visited {
color: #777;
}

.post .post_meta a:hover,
.post .post_meta a:active {
color: #777;
}

.post_controls {
   clear: both;
   background: #e0e0e0;
   overflow: hidden;
   position: relative;
   padding: 5px;
}

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
color: #fff;
display: inline-block;
padding: 2px 5px;
margin: 2px;
text-shadow: 1px 1px 0px #2a2a2a;
font-size: 12px;
}

.postbit_buttons > a:hover {
border-color: #bbb;
}

.postbit_buttons a span:before {
content: "";
   display: inline-block;
   font-family: FontAwesome;
   font-weight: normal;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin-right: 5px;
   font-size: 12px;
}

.postbit_buttons a.postbit_find span {
background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
background-position: 0 -320px;
}

.postbit_qrestore,
.status_type{
display:none!important;
}

.deleted_post .postbit_qrestore,
.deleted_post .status_type{
display:inline!important;
}

.deleted_post .postbit_mirage{
display:none!important;
}

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
background: #0f0f0f url(images/tcat.png) repeat-x;
color: #fff;
display: inline-block;
padding: 4px 8px;
margin: 2px 2px 6px 2px;
border: 1px solid #000;
font-size: 14px;
}

a.button.small_button {
font-size: 13px;
margin: 0;
padding: 3px 6px;
}

a.button span {
padding-left: 20px;
display: inline-block;
font-variant: small-caps;
text-transform: uppercase;
font-size:11px;
background-repeat: no-repeat;
}

a.button.new_thread_button span {
background-position: 0 -340px;
}

a.button.new_reply_button span {
background-position: 0 -360px;
background: url('http://i64.tinypic.com/qysefn.png');
}

a.button.closed_button span {
background-position: 0 -380px;
}

a.button.rate_user_button span {
background-position: 0 -400px;
}

a.button.add_buddy_button span {
background-position: 0 -440px;
}

a.button.remove_buddy_button span {
background-position: 0 -480px;
}

a.button.add_ignore_button span {
background-position: 0 -460px;
}

a.button.remove_ignore_button span {
background-position: 0 -500px;
}

a.button.report_user_button span {
background-position: 0 -520px;
}

.quick_jump {
background: url(images/jump.png) no-repeat 0;
width: 13px;
height: 13px;
padding-left: 13px; /* amount of padding needed for image to fully show */
margin-top: -3px;
border: none;
}

.pollbar {
background: url(images/pollbar.png) top left repeat-x;
border: 1px solid #3f3f3f;
height: 10px;
}

.pollbar .percent {
display: none;
}

.posticons_label {
white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
position: absolute;
}

.ie6.top-right {
right: auto;
bottom: auto;
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
z-index: 9999;
color: #ffffff;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: fixed;
}

.jGrowl.top-left {
left: 0px;
top: 0px;
}

.jGrowl.top-right {
right: 0px;
top: 0px;
}

.jGrowl.bottom-left {
left: 0px;
bottom: 0px;
}

.jGrowl.bottom-right {
right: 0px;
bottom: 0px;
}

.jGrowl.center {
top: 0px;
width: 50%;
left: 25%;
}

/** Cross Browser Styling **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
margin-left: auto;
margin-right: auto;
}

.jGrowl-notification {
background-color: transparent;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
zoom: 1;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
word-break: break-all;
}

.jGrowl .jGrowl-notification {
min-height: 40px;
}

.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
border: 1px solid #000;
background: #000;
color: #fff;
}

.jGrowl-notification .jGrowl-header {
font-weight: bold;
font-size: .85em;
}

.jGrowl-notification .jGrowl-close {
background-color: transparent;
color: inherit;
border: none;
z-index: 99;
float: right;
font-weight: bold;
font-size: 1em;
cursor: pointer;
}

.jGrowl-closer {
background-color: #000000;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
zoom: 1;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
border-radius: 5px;
word-break: break-all;
padding-top: 4px;
padding-bottom: 4px;
cursor: pointer;
font-size: .9em;
font-weight: bold;
text-align: center;
}

.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
border: 1px solid #000;
background: #000;
color: #fff;
}

.jGrowl .jGrowl-notification.jgrowl_success {
    background: lightgreen;
    border: 1px solid lightgreen;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
    background: red;
    border: 1px solid red;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer {
    background: yellow;
    border: 1px solid yellow;
color: #333;
}

/** Hide jGrowl when printing **/
@media print {
.jGrowl {
display: none;
}


}

/** jGrowl End **/

/** Modal Start **/

.blocker {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
}

.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}

.blocker.behind {
background-color: transparent;
}

.modal {
width: 400px;
text-align: left;
background: #fff;
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v6.2.3 - 2016-04-23
* http://trentrichardson.com/Impromptu
* Copyright (c) 2016 Trent Richardson; Licensed MIT */

.jqifade{
position: absolute;
background-color: #777777;
}

iframe.jqifade{
display:block;
z-index:-1;
}

div.jqi{
width: 400px;
max-width:90%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 7px;
}

div.jqi .jqicontainer{
}

div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}

div.jqi .jqistate{
background-color: #fff;
}

div.jqi .jqititle{
padding: 5px 10px;
font-size: 16px;
line-height: 20px;
border-bottom: solid 1px #eeeeee;
}

div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
overflow: auto;
}

div.jqi .jqibuttonshide{
display: none;
}

div.jqi .jqibuttons{
text-align: right;
margin: 0 -7px -7px -7px;
border-top: solid 1px #e4e4e4;
background-color: #f4f4f4;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqibuttons button{
margin: 0;
padding: 15px 20px;
background-color: transparent;
font-weight: normal;
border: none;
border-left: solid 1px #e4e4e4;
color: #777;
font-weight: bold;
font-size: 12px;
}

div.jqi .jqibuttons button.jqidefaultbutton{
color: #489afe;
}

div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
color: #287ade;
outline: none;
}

div.jqi .jqibuttons button[disabled]{
color: #aaa;
}

.jqiwarning .jqi .jqibuttons{
background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{
background-color: #777;
opacity: 0.6;
filter: alpha(opacity=60);
content: '';
position: absolute;
top:0;left:0;bottom:0;right:0;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

div.jqi .jqisubstate{
position: absolute;
top:0;
left: 20%;
width: 60%;
padding: 7px;
border: solid 1px #eeeeee;
border-top: none;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqisubstate .jqibuttons button{
padding: 10px 18px;
}

/* arrows for tooltips/tours */
.jqi .jqiarrow{
 position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;
}

.jqi .jqiarrowtl{
 left: 10px; top: -20px; border-bottom-color: #ffffff;
}

.jqi .jqiarrowtc{
 left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px;
}

.jqi .jqiarrowtr{
 right: 10px; top: -20px; border-bottom-color: #ffffff;
}

.jqi .jqiarrowbl{
 left: 10px; bottom: -20px; border-top-color: #ffffff;
}

.jqi .jqiarrowbc{
 left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px;
}

.jqi .jqiarrowbr{
 right: 10px; bottom: -20px; border-top-color: #ffffff;
}

.jqi .jqiarrowlt{
 left: -20px; top: 10px; border-right-color: #ffffff;
}

.jqi .jqiarrowlm{
 left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px;
}

.jqi .jqiarrowlb{
 left: -20px; bottom: 10px; border-right-color: #ffffff;
}

.jqi .jqiarrowrt{
 right: -20px; top: 10px; border-left-color: #ffffff;
}

.jqi .jqiarrowrm{
 right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px;
}

.jqi .jqiarrowrb{
 right: -20px; bottom: 10px; border-left-color: #ffffff;
}

/** Impromptu End */
this has been my first attempt at developing a theme so please forgive any erroneous CSS errors. Wink

User 6029

2018-10-07, 04:56 AM
Have you tried:


.post.classic .post_author {
	border: 1px solid #ddd;
	float: left;
/*	width: 15%; */
	width: 20%;
	margin: 0 1% 15px 0;
	border-left: 0;
	padding: 5px 1%;
}



.post.classic .post_content {
	float: left;
/*	width: 79%; */
	width: 74%;
	padding: 0 1% 5px 1%;
}

As far as your postbit sizing as that should most likely solve your issue.

hexote

2018-10-07, 05:27 AM
That certainly did the trick! Thanks so much.

User 6029

2018-10-07, 09:01 AM
(2018-10-07, 05:27 AM)hexote Wrote: [ -> ]That certainly did the trick! Thanks so much.

Cool beans, glad you got it sorted out.
MyBB Community Forums > 1.8 Support > General Support > Postbit width affecting post contents