Strange Look of the Code/Quote/PHP/HTML blocks in post

[MarkFL]

Okay, here is the code I use:

The "bbcode_code" template:

<div class="code_box_wrapper MHB_wrappers">
	<div class="code_box_description">{vb:rawphrase code}:</div>
	<div class="code_box"><pre id="code_select" class="code_box_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</pre></div>
</div>
<script>
	var newid = GetNewId("code_select");
	var el = document.getElementById(newid).parentNode;
	el.style.maxHeight = code_height + 'px';
	maxMinButton(newid,code_height,0);
</script>

The "bbcode_html" template:

<div class="code_box_wrapper MHB_wrappers">
	<div class="code_box_description">{vb:rawphrase html_code}:</div>
	<div class="code_box"><pre id="code_select" class="code_box_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</pre></div>
</div>
<script>
	var newid = GetNewId("code_select");
	var el = document.getElementById(newid).parentNode;
	el.style.maxHeight = code_height + 'px';
	maxMinButton(newid,code_height,0);
</script>

The "bbcode_php" template:

<div class="code_box_wrapper MHB_wrappers">
	<div class="code_box_description">{vb:rawphrase php_code}:</div>
	<div class="code_box"><code id="code_select" class="php_code_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</code><br></div>
</div>
<script>
	var newid = GetNewId("code_select");
	var el = document.getElementById(newid).parentNode;
	el.style.maxHeight = code_height + 'px';
	maxMinButton(newid,code_height,0);
</script>

The "bbcode_quote" template:

<script>
	isQuote = true;
	quoteLevel++;
</script>

<div class="bbcode_container">
	<div class="bbcode_quote">
		<div class="quote_container">
			<div class="bbcode_quote_container triangle"></div>
			<div class="bbcode_postedby">
				<img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" />
				<vb:if condition="$show['username']">
					{vb:rawphrase originally_posted_by_x, {vb:raw username}}
					<vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg quote_show_post" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
				<vb:else />
					<b>Quote:</b>
				</vb:if>
			</div>
			<div class="message quote_container_outer">
				<div id="code_select" class="quote_container_inner">{vb:raw message}</div>
			</div>
		</div>
	</div>
</div>

<script>
	quoteId[quote_count] = GetNewId("code_select");
	var el = document.getElementById(quoteId[quote_count]).parentNode;
	el.style.maxHeight = code_height + "px";
	window.onload = function(){setTimeout(function(){isQuote = true;for(var n = 0;n <= quote_count;n++){maxMinButton(quoteId[n],code_height,n);};isQuote = false;},1000);};
	quote_count++;
	quoteLevel--;
	if(!quoteLevel)
	{
		isQuote = false;
	}
</script>

The CSS classes to be added to the "additional.css" template:

/*-----Quote Box Styles-----*/

.bbcode_quote
{
	color: #14495F;
	box-shadow: 2px 2px 3px rgba(20,74,98,0.5);
}

.quote_container
{
	padding: 0px 0px 0px 10px !important;
}

.triangle
{
	position: absolute;
	top: 5px;
}

.quote_container_outer
{
	margin: 1px 0px;
	overflow: auto;
	font-style: normal;
}

.quote_container_inner
{
	padding-right: 10px;
	padding-bottom: 5px;
}

.no_postedby_message
{
	padding: 5px 0px;
}

.bbcode_postedby
{
	margin-right: 10px;
	border-bottom: solid 1px #417394;
	padding: 5px 0px 5px 5px;
	font-size: 11px;
}

.quote_show_post
{
	vertical-align: 0px !important;
}

/*-----Code Box Styles-----*/

.code_box_wrapper
{
	margin: 20px 30px;
	padding-bottom: 1px;
	border: solid 1px #006000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #e7e7e7; /* Old browsers */
	background: -moz-linear-gradient(left, #e7e7e7 0%, #ffffff 50%, #e7e7e7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e7e7e7), color-stop(50%,#ffffff), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* IE10+ */
	background: linear-gradient(to right, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=1 ); /* IE6-8 */
}

.code_box_description
{
	margin: 0px 10px 1px 10px;
	padding: 5px 10px;
	border-bottom: solid 1px #006000;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
	color: #800000;
	font-size: 11px;
	font-weight: bold;
}

.code_box
{
	padding: 15px 10px 0px 10px;
	overflow: auto;
	color: #000060;
}

.code_box_text
{
	font-family: Lucida Console,Courier,monospace;
	font-size: 12px;
	line-height: 1.25;
	cursor: pointer;
}

.php_code_text
{
	font-size: 15px;
	cursor: pointer;
}

/*-----Max/Min Button Styles for Quote/Code Boxes-----*/

.maxminbutton
{
	position: relative;
	float: right;
	right: 10px;
	top: 4px;
	width: 60px;
	height: 15px;
	text-align: center;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 9pt;
	box-shadow: 2px 2px 3px rgba(20,74,98,0.5);
}

.maxminbutton:active
{
	position: relative;
	float: right;
	right: 9px;
	top: 5px;
	box-shadow: none;
}

The support javascript which can either be put into an external file or included in the "headinclude_bottom" template within <script> tags:

var code_height = 300, isQuote = false, quoteLevel = 0, quote_count = 0, quoteId = [], quoteAddHeight = [];

for(var n = 0; n < 64; n++){quoteAddHeight[n] = 0;}

function GetNewId(oldid)
{
	var rn,newid="id";
	for(var i=0;i<8;i++)
	{
		rn = Math.floor(Math.random()*18446744073709551616);
		newid = newid + rn;
	}
	document.getElementById(oldid).id = newid;
	return newid;
}

function selectText(containerid)
{
	if (document.selection)
	{
		var range = document.body.createTextRange();
		range.moveToElementText(document.getElementById(containerid));
		range.select();
	}
	else if (window.getSelection)
	{
		var range = document.createRange();
		range.selectNode(document.getElementById(containerid));
		window.getSelection().addRange(range);
	}
}

function maxMinButton(elid,default_size,elnum)
{
	var el = document.getElementById(elid).parentNode;
	var sH = el.scrollHeight;
	if(isQuote)
	{
		sH += quoteAddHeight[elnum];
	}
	if(el.clientHeight < sH)
	{
		var maxMinB = document.createElement("div");
		maxMinB.className = "mhb_gradient mhb_button mhb_button_small maxminbutton";
		maxMinB.innerHTML = "Expand";
		maxMinB.title = "Expand to Full Height";
		maxMinB.onclick = function()
					{
						if(this.innerHTML != 'Collapse')
						{
							el.style.maxHeight = 'none';
							this.innerHTML = 'Collapse';
							this.title = 'Collapse to Default Height';
						}
						else
						{
							el.style.maxHeight = default_size + 'px';
							this.innerHTML = 'Expand';
							this.title = 'Expand to Full Height';
						}
					};
		el.parentNode.insertBefore(maxMinB,el.parentNode.firstChild);
	}
}