Extending Edges to Maximum

[TPOCJames]

Okay. I'm trying to get my vBulletin to extend all the way to the edges of the screen (maximum width). Can someone please tell me how to do this? My table width is at 100% and it still isn't working

Link: http://into-thin-air.com

[Freesteyelz]

Go to Main CSS and in the body tag change the default:

margin: 5px 10px 10px 10px;

To

margin: 5px 0 10px 0;

[peterska2]

The best way to do it, is actually to go into All Style Options (via the style manager) for the style that you wish to change, and set the spacer size, and outer border width to a lower number. Experiment with these till you get the effect that you want.

Freesteyelz's method will sorta work, but will result in an uneven appearance as the spacer and outerboarder width are used in the majority of templates and so just adjusting the body tag will result in a jagged look.

[TPOCJames]

Sorry... I should've explained more.

I want the footer to extend all the way to the end. Will the methods above work?

[peterska2]

set the spacer size and outer border width settings to 0

This will then stretch your entire style to fit from the extreme left to the extreme right of the browser window (assuming fluid style of course)

[TPOCJames]

Thanks, that almost extended it to the end.

If you take a look now, it still has about 1px seperating it from extending all the way.

EDIT: Sorry, I sounded sarcastic a bit. I really mean thank you.

[peterska2]

Thats the cell padding, but if you change that it will squash all your tables throughout your site.

The tiny gap there (black on black so not noticable) actually makes it easy to read as it has more definition between the edge of the window and the text/images

[TPOCJames]

Is there a way to make this one not affected by the cell padding on the rest of the site?

Also, if you look at the top where the header is, the line there extends all the way to the end.

Someone suggested that I put the spacer close before the footer, think it'd work?

In case it helps, here is my footer code to evaluate.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="alt1" style="border-top: 1px solid $stylevar[tborder_bgcolor]; border-bottom: 1px solid $stylevar[tborder_bgcolor];">
<div class="smallfont" align="center"><em>&quot;$randomquote[quote]&quot;</em> - <strong>$randomquote[author]</strong></div>
</td>
</tr>
</tbody></table>

[peterska2]

Your board is closed to guests so I cannot see what you are looking at. I can also only assume that I am looking at the same style as you (which it might not be) and can only see the banner, a log in/register box, and the footer.

The code you have posted there is not a full footer code, so I can't evaluate that.

[TPOCJames]

Oops, sorry, you're right. I forgot to post the whole thing. My bad.

<!-- random quote -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="alt1" style="border-top: 1px solid $stylevar[tborder_bgcolor]; border-bottom: 1px solid $stylevar[tborder_bgcolor];">
<div class="smallfont" align="center"><em>&quot;$randomquote[quote]&quot;</em> - <strong>$randomquote[author]</strong></div>
</td>
</tr>
</tbody></table>
<!-- / random quote -->

<!-- Paypal & Affiliates -->
	<table class="page" border="0" cellpadding="1" cellspacing="0" width="100%">
		<tbody><tr>
			<td class="page" align="left" valign="bottom">	
				<!-- Paypal -->
					<a href="http://into-thin-air.com" target="_blank"><img src="http://images.paypal.com/images/lgo/logo3.gif" border="0"></a>
				<!-- Paypal -->

    	            	</td>

        	

<td class="page" align="right" valign="bottom">
<a href="http://www.nexcess.net/affiliates/idevaffiliate.php?id=765"><img src="http://i15.photobucket.com/albums/a389/osiris2080/nex_btn4.gif" border="1"></a></td></tr>
	</tbody></table> 
<!--!-- Paypal & Affiliates ---->

<!-- Bottom Bar -->
	<table class="page" style="border-top: 1px solid $stylevar[tborder_bgcolor]; border-bottom: 1px solid $stylevar[tborder_bgcolor]; margin-bottom: 0px;  background-color: $stylevar[thead_bgcolor];" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
		<!-- bottomlinks--> 
			<tbody><tr>
				<td class="tfoot" style="background-color: $stylevar[thead_bgcolor];" align="left">	
    		                   	<div class="smallfont">

						<!-- Do not remove this copyright notice -->
						$vbphrase[powered_by_vbulletin]
						<!-- Do not remove this copyright notice -->
						<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->						
						$cronimage
						<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
              		         	</div>
           		     	</td>
				<td class="tfoot" style="background-color: rgb(24, 18, 8);" align="right">

                     	  		<div class="smallfont">
                       				<strong><a href="archive/index.php"><u>Archive</u></a> |  <a href="index.php"><u>Refresh</u></a> | <a href="#top" onclick="self.scrollTo(0, 0); return false;"><u>Top</u></a>&nbsp;&nbsp;</strong>
                     				<br>All Original Schemes, Images, and Content is &copy;2006 <strong>Vanished: Into Thin Air</strong></a>
                    	 		  </div>

				</td>
  	      		</tr>
		<!-- /bottomlinks-->
	</tbody></table> 
<!-- /Bottom Bar -->


<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php" method="post" name="dstform">
	<input type="hidden" name="s" value="$session[sessionhash]" />
	<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
	var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
	var utcOffset = new Date().getTimezoneOffset() / 60;
	if (Math.abs(tzOffset + utcOffset) == 1)
	{	// Dst offset is 1 so its changed
		document.forms.dstform.submit();
	}
//-->
</script>
<!-- / auto DST correction code -->

</if>
<script type="text/javascript">
<!--
	// Main vBulletin Javascript Initialization
	vBulletin_init();
//--></td>
</script>

In case it helps, my margin settings are: 0px 0px 0px 0px. cellpadding is 0px as well.

I really don't know what's wrong.