PDA

View Full Version : Can't Get Header to Line Up with Body


Factory Ten
09-15-2007, 05:03 PM
I'm having issues with getting my header to line up with the rest of my forums. I've attached an image of the upper-right corner. I'm trying to get the header to align with the body of the forums, but I'm not having much luck. This is happening on both the right and left sides of the header.

My header template looks like this:


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]" style="background-image:url($stylevar[imgdir_misc]/top_x.gif)"><img src="$stylevar[imgdir_misc]/top_left.gif" align="$stylevar[left]" alt="" /></td>
<td align="$stylevar[right]" style="background-image:url($stylevar[imgdir_misc]/top_x.gif)"><img src="$stylevar[imgdir_misc]/top_right.gif" align="$stylevar[right]" alt="" /></td>
</tr>
<tr>
<td align="$stylevar[left]" style="background-image:url($stylevar[imgdir_misc]/purple/f10gradient.jpg)"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]" style="background-image:url($stylevar[imgdir_misc]/purple/f10gradient.jpg)">
&nbsp;
</td>
</tr>
<tr>
<td align="$stylevar[left]" style="background-image:url($stylevar[imgdir_misc]/nav_x.gif)" height="22"><img src="$stylevar[imgdir_misc]/nav_left.gif" align="$stylevar[left]" alt="" />
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/link_forum.gif" border="0" alt="" /></a></td>
<td><if condition="$show['member']"><a href="usercp.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/link_usercp.gif" border="0" alt="" /></a></if></td>
<td id="usercptools"><if condition="$show['member']"><a href="$show[nojs_link]#usercptools"><img src="$stylevar[imgdir_misc]/link_quick.gif" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools" ,1); </script></if></td>
<td><if condition="$show['registerbutton']"><a href="register.php$session[sessionurl_q]" rel="nofollow"><img src="$stylevar[imgdir_misc]/link_register.gif" border="0" /></a></if></td>
<td><a href="memberlist.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/link_members.gif" border="0" alt="" /></a></td>
<td id="navbar_search"><a href="$show[nojs_link]#navbar_search"><img src="$stylevar[imgdir_misc]/link_search.gif" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("navbar_search" ,1); </script></td>
<td><if condition="$show['member']"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><img src="$stylevar[imgdir_misc]/link_logout.gif" border="0" alt="" /></a></if></td>
<td><img src="$stylevar[imgdir_misc]/link_rs.gif" border="0" alt="" /></td>
</tr>
</table>
</td>
<td align="$stylevar[right]" style="background-image:url($stylevar[imgdir_misc]/nav_x.gif)"><img src="$stylevar[imgdir_misc]/nav_right.gif" align="$stylevar[right]" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
<tr>
<td width="12" align="left" valign="top"><img src="$stylevar[imgdir_misc]/upper_left.gif" width="12" height="11" alt="" /></td>
<td width="100%" align="left" valign="top"><img src="$stylevar[imgdir_misc]/upper_middle.gif" width="100%" height="11" alt="" /></td>
<td width="12" align="left" valign="top"><img src="$stylevar[imgdir_misc]/upper_right.gif" width="12" height="11" alt="" /></td>
</tr>
<tr>
<td width="12" align="left" valign="top" style="background-image:url($stylevar[imgdir_misc]/left_middle.gif)" height="100%"><img src="$stylevar[imgdir_misc]/left_middle.gif" width="12" height="100%" alt="" /></td>
<td>

<!-- content table -->


Anyone know what I should be looking at to fix this?

wacnstac
09-15-2007, 06:15 PM
It's funny you should mention this but I am fighting the exact same problem using almost the exact same code you are at:

http://www.michigan-sportsman.com/forum/forumdisplay.php?f=60

pitzerwm
09-16-2007, 12:18 AM
I don't know if this will help you, but this is what I did. forum.autocareforum.com

Now the funny thing is that the same code is used in the footer, and works correct.

Someplace I read that you make a table with 3 colums in it, placing a background & images in each, but in the middle one, just put in the background, a 1px image, and say repeat. It will fill up the column to adjust to the size of the browser screen.

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="95%" align="center" background="/images/blue_black-10x120.jpg">

<tr>
<td align="left"><img src="images/transparent.gif" width="1" height="1" /><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]" border="0" >
<iframe width="620" height="100" frameborder="0" scrolling="no" target="_top" align="right" src="http://www.autocareforum.com/cgi-bin/banner_grp?214,130" />

</iframe>
</td>
</tr>
</table>

wacnstac
09-16-2007, 12:37 AM
I think there must be a more straight forward way....

This is really frustrating. I can't see why my header as coded:

<!-- logo -->
<a name="top"></a>


<table width="$stylevar[outertablewidth]" height="300" border="0" cellpadding="0" cellspacing="0">

<tr>
<td>
<img src="http://www.michigan-sportsman.com/images/fall_slice1.jpg" alt="" width="400" height="301" border="0" usemap="#Header_Map">
<map name="Header_Map">
<area shape="rect" alt="MI Weather" coords="62,195,209,220" href="http://www.michigan-sportsman.com/weather.htm">
<area shape="rect" alt="MS.com Stuff" coords="63,173,190,194" href="http://www.michigan-sportsman.com/apparel.htm">
<area shape="rect" alt="Hunting Articles" coords="63,154,205,172" href="http://www.michigan-sportsman.com/hunting_articles/hunting_library.htm">
<area shape="rect" alt="Fly Patterns" coords="64,131,183,151" href="http://www.michigan-sportsman.com/fly_pictures/bettymcnault.htm">
<area shape="rect" alt="Fishing Articles" coords="63,108,203,128" href="http://www.michigan-sportsman.com/fishing_articles/fish_library.htm">
<area shape="rect" alt="Home" coords="63,86,143,106" href="http://www.michigan-sportsman.com/">
</map>
</td>
<td background="http://www.michigan-sportsman.com/images/fall_slice2.jpg" width="100%" height="301" alt="" align="right" style="background-repeat: no-repeat;">
<table width="100% border="0">
<tr>
<td colspan="2">
<div align="right">

<SCRIPT LANGUAGE="JavaScript">
random = parseInt(Math.random()*1000)
banner = '<IFRAME src="http://www.michigan-sportsman.com/cgi-bin/adsbanner.pl?iframe; allowTransparency="true" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=470 HEIGHT=90>'
banner += '<A HREF="http://www.michigan-sportsman.com/cgi-bin/adsbanner.pl?banner=NonSSI;zone=banner;'
banner += 'page=' + random + '" TARGET="_blank">';
banner += '<IMG SRC="http://www.michigan-sportsman.com/cgi-bin/adsbanner.pl?'
banner += 'page=' + random + '"'
banner += ' ALT="Click Here!" BORDER=0></A>'
banner += '</IFRAME>'
document.write(banner)
</SCRIPT>

</div>
</td>
</tr>
<tr>
<td>
<div align="right">
<br><a href="http://www.michigan-sportsman.com/sponsors.htm"><b>View our sponsors</b></a><br>
<a href="http://www.igreatlakes.com/ads.htm">Be a sponsor</a>
</div>
</td>
<td>
<div align="right">

<SCRIPT LANGUAGE="JavaScript">
banner = '<IFRAME src="http://www.michigan-sportsman.com/cgi-bin/adsbutton.pl?iframe;" allowTransparency="true" STYLE="background-color: #F0F4D8" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO bgcolor="#F0F4D8" WIDTH=125 HEIGHT=170>'
banner += '<A HREF="http://www.michigan-sportsman.com/cgi-bin/adsbutton.pl?banner=NonSSI;zone=button;'
banner += 'page=' + random + '" TARGET="_blank">';
banner += '<IMG SRC="http://www.michigan-sportsman.com/cgi-bin/adsbutton.pl?'
banner += 'page=' + random + '"'
banner += ' ALT="Click Here!" BORDER=0></A>'
banner += '</IFRAME>'
document.write(banner)
</SCRIPT>

</div>
</td>
</tr>

</table></td>
</tr>

</table>


<!-- /logo -->

Should be any wider than the forums table.