# Solved: Need Help with table on Invasionfree



## deltanator (Dec 31, 2008)

on my clan forums i want my catagorys look like this







i want them all the way over. can some1 help m please? =[ heres my css and border if u need that to help me: 
header:


```
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"><body text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="2" topmargin="2" marginwidth="2" marginheight="0">
<table width="804" border="0" align="center" cellpadding="4" cellspacing="0" bgcolor="#070707" height="377" bordercolor="#070707">
<tr>
<td width="100%" height="100%"  bgcolor="#070707">


<% BOARD HEADER %>



<!-- By Choco of the IFSZ -->
<div class="tableborder">
<div class="maintitle">Unleashed Pain</div>
<table width="100%" height="200px"cellspacing="1" cellpadding="4"><tr height="20px">
<th class="titlemedium" width="30%">Miscellanious</th><th class="titlemedium" width="40%">News</th><th width="30%" class="titlemedium">Links</th></tr>
<tr><td class="row2" style="text-align:center;">

<br /><b>Hello and welcome to Unleashed Pain 110+ F2P forums. You will need to register if you want to see all of our threads. 

Please register with your full Runescape name.
</b><br /> IRC Channel: #Unleash_pain</b><br />Clan Chat: Up_Chat</b><br />

</td>
<td class="row4" style="text-align:center;">
<marquee behavior="slide" marquee direction="up" scrollamount="2" scrolldelay="1" height="100%" width="100%" style="text-align:center;">

<br /> <br /><b>Welcome to Unleashed Pain's forums!</b><br /><br /><font color="red">Important!</font><br /><br />Download TEAMSPEAK BEFORE Next War<br /><a href="http://z11.************.com/Unleashed_Pain/index.php?showforum=29'font color="red">Click here To Download Teamspeak</a><br /><br />We will be posting important news<Br />and war information in this box.<br />Please pay attention to this box<br />to stay active and up-to-date<br />with the Clan's affairs.<Br /><br /><br />

</marquee>

</td><td class="row2"style="text-align:center;">

<a href="http://www.runescape.com">Runescape</a><br />
<a href="http://www.runehead.com/clans/ml.php?clan=unleash_pain"> Members List</a><br />
<a href="http://www.runehead.com/clans/ml.php?clan=painfa">Future Applicants</a><br />
<a href="http://www.runehq.com/">Rune HQ</a><br /><a href="http://tip.it/runescape/">Tip It</a><br />
<a href="http://www.zybez.net/">Zybez</a><br />
<a href="http://www.swiftswitch.net/">SwiftKit</a><br />
<a href="http://runescape.salmoneus.net/">Salmoneus</a><br />
</td>
</tr>
<th class="titlemedium" width="100%" colspan="3">
<font color="#FFCC00" face="Blue Highway" size="4">
<marquee scrolldelay="190" F" behavior="slide" loop="10">  <img border="0" src="http://i296.photobucket.com/albums/mm182/sabedoria7/crown-2.jpg" width="25" height="25"> Clan Milestones ~ &nbsp;&nbsp;&nbsp;&nbsp; 
Archerdude08 gets 99 Hitpoints, &nbsp;&nbsp;&nbsp;&nbsp; Sage_288 gets 99 Hitpoints, &nbsp;&nbsp;&nbsp;&nbsp; Stonepayc1 gets 99 Defence</marquee></font></th>

</table>
</div>


  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="60" id="AutoNumber1" bgcolor="#3E3E3E">
        <tr>
      <td width="60" height="100%">
      <p align="left"><b>
      <img border="0" src="http://i296.photobucket.com/albums/mm182/sabedoria7/upcomingwaricon.jpg" width="60" height="60"><font color="#FFFFFF"> </font>
      <font color="#C0C0C0">  </font></b></td>
      <td width="100%" height="100%">
      <p align="center">
      <b>
      <font color="#C0C0C0">Upcoming 
      War:&nbsp; UP vs WF
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=2315">
      <font color="#C0C0C0">( Click Here For Sign UP )</font></a></font></b></td>
      <td width="100%" height="100%">
      <img border="0" src="http://i296.photobucket.com/albums/mm182/sabedoria7/upcomingwaricon.jpg" width="60" height="60"></td>
    </tr>

  </table>



<div align="left">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="826" height="25" id="AutoNumber1">
    <tr>
      <td width="174" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=2215">&nbsp;War Related Help</a></b></font></td>
      <td width="98" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showforum=4">&nbsp;Clan News</a></b></font></td>
      <td width="128" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=2227">Clan Feedback</a></b></font></td>
      <td width="69" height="25" align="center"><font color="#00FFFF"><b>&nbsp;<a href="http://z11.************.com/Unleashed_Pain/index.php?act=site"> 
      Events</a></b></font></td>
      <td width="142" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showforum=11">&nbsp;Clan Discussion</a></b></font></td>
      <td width="101" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=2060">&nbsp;P2P Gear</a></b></font></td>
      <td width="99" height="25" align="center"><font color="#00FFFF"><b>
      <a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=524">F2P Gear</a></b></font></td>
    </tr>
  </table>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>



<% NAVIGATION %>

<% BOARD %>
<% STATS %>
```
Css:


```
html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 9px; color:#696969;margin:0px 10px 0px 10px;background-color:#0D0D0D }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #696969; }
a:link, a:visited, a:active { text-decoration: underline; color: #B66718 }
a:hover { color: #FFF; text-decoration:none }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:1px inset #000;padding:3px }

.googleroot  { padding:6px; line-height:130% }
.googleparent { padding:6px; margin-left:30px; line-height:130%; color:#108706 }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#696969 }
.caldate  { text-align:right;font-weight:bold;font-size:10px;color:#696969; background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); padding:2px;margin:0px;border-top:3px double #0A0A0A;border-bottom:3px double #0A0A0A;border-right:1px solid #0A0A0A;border-left:1px solid #0A0A0A; }

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg  { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; border:3px double #0A0A0A;background-color: #252525 }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #252525; border:3px double #0A0A0A;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border-top:3px double #151515;border-bottom:3px double #151515;border-right:1px solid #151515;border-left:1px solid #151515;background-color: #252525;background-image:url(http://);padding:0px;margin:0px; }
#submenu  { border-top:3px double #151515;border-bottom:3px double #151515;border-right:1px solid #151515;border-left:1px solid #151515;background-color: #252525;font-size:10px;margin:3px 0px 3px 0px;color:#B66718;font-weight:bold;}
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #B66718 }
#submenu a:hover { color:#CC751B;text-decoration:none; }
#userlinks { border-bottom:1px solid #0A0A0A;border-right:1px solid #0A0A0A;border-left:1px solid #0A0A0A; border-top:3px solid #0A0A0A;background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); }

#navstrip  { font-weight:bold;background-color:#252525;border-top:3px double #151515;border-bottom:3px double #151515;border-right:1px solid #151515;border-left:1px solid#151515;padding:4px 2px 4px 2px }

.activeuserstrip { background-color:#161616; padding:3px }

.pformstrip { background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); color:#FFF;font-weight:normal;padding:3px;margin-top:1px }
.pformleft  { background-color: #252525; padding:6px; margin-top:1px;width:25%; border-top:1px solid #0A0A0A; border-right:1px solid #0A0A0A;border-left:1px solid #0A0A0A }
.pformleftw { background-color: #252525; padding:6px; margin-top:1px;width:40%; border-top:1px solid #0A0A0A; border-right:1px solid #0A0A0A; }
.pformright { background-color: #252525; padding:6px; margin-top:1px;border-top:1px solid #0A0A0A;border-right: 1px Solid #0A0A0A; }

.post1 { background-color: #1F1F1F }
.post2 { background-color: #1F1F1F }
.postlinksbar { text-align:center;background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); padding:3px;margin-top:1px;font-size:9px;border-right:1px solid #0A0A0A;border-left:1px solid #0A0A0A;  }

.row1 { background-color: #252525;border-top:1px solid #313131;border-left:1px solid #313131; }
.row2 { background-color: #252525;border-top:1px solid #313131;border-left:1px solid #313131; }
.row3 { background-color: #252525;border-top:1px solid #313131;border-left:1px solid #313131; }
.row4 { background-color: #252525;border-top:1px solid #313131;border-left:1px solid #313131; }

.darkrow1 { background-color: #1A1A1A; color:#696969; }
.darkrow2 { background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); border-bottom:1px solid #272727;color:#FFF;padding:2px }
.darkrow3 { background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); color:#FFF; }

.hlight { background-color: #252525 }
.dlight { background-color: #252525 }

.titlemedium { font-weight:normal; color:#FFF; padding:3px; margin:0px; background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif);border-left:1px solid #313131; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #FFF }

.maintitle { text-align:center;vertical-align:middle;font-weight:bold; color:#422509; letter-spacing:1px; padding: 8px 0px 8px 5px ;background-image: url(http://209.85.48.12/3553/197/upload/p241100.gif); background-position:center;background-repeat:no-repeat;width:100%; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #422509 }
.maintitle a:hover { text-decoration: underline }

.plainborder { border:3px double #7A4510;background-color:#080808 }
.tableborder { border:0px solid #345487;background-color:#0A0A0A; padding:0px; margin:0px; width:100% }
.tablefill  { border-bottom:1px solid #3A3A3A;border-right:1px solid #3A3A3A;border-left:1px solid #0A0A0A; border-top:1px solid #0A0A0A;background-color:#2C2C2C;padding:6px;  }
.tablepad    { background-color:#252525;border-top:3px double #0A0A0A;border-bottom:3px double #313131;border-right:3px double #313131;border-left:3px double #0A0A0A;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
div.row4 { border-bottom:1px solid #313131;border-right:1px solid #313131;border-left:1px solid #0A0A0A; border-top:1px solid #0A0A0A;background-color:#2C2C2C; }

.wrapmini    { background-color:#252525; float:left;line-height:1.5em;width:25% }
.pagelinks  { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#696969 }
.edit { font-size: 9px; color:#B66718;border-bottom:1px solid #313131;border-right:1px solid #313131;border-left:1px solid #0A0A0A; border-top:1px solid #0A0A0A;background-color:#161616;padding: 0px 2px 0px 2px }

.signature  { font-size: 10px; color: #696969 }
.postdetails { font-size: 10px;  }
.postcolor  { font-size: 12px; line-height: 160% }

.normalname { font-size: 11px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 11px;C:Z00 }
.unreg { font-size: 10px; font-weight: normal; color: #B66718 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 10px; color: #696969; border-bottom:1px solid #313131;border-right:1px solid #313131;border-left:1px solid #0A0A0A; border-top:1px solid #0A0A0A;background-color:#2C2C2C; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #696969; border-bottom:1px solid #313131;border-right:1px solid #313131;border-left:1px solid #0A0A0A; border-top:1px solid #0A0A0A;background-color:#2C2C2C; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

</style><center>Skin <b>.Wiredvage
</b> designed by <b>Zeus00</b> of the <b><a href="http://************.com/forums/ifskinzone/index.php" target="_blank">IF Skin Zone</a></b>.</center><style type='text/css'>

.codebuttons  { font-size: 9px; color:#B66718; font-family: verdana, helvetica, sans-serif; vertical-align: middle;background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); background-color:#181818;border:1px solid #0A0A0A; }
.forminput, .radiobutton, .checkbox  { border:1px solid #0A0A0A; background-position: center; color: #FFF; background-image: url(http://209.85.48.12/3553/197/upload/p241329.gif); background-color:#181818; font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.textinput {  border: 1px solid #0A0A0A;background-color:#181818; font-size: 10px; color:#FFF; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:3px 2px 3px 2px;line-height:140%;margin:2px 0px 2px 0px;border-top:3px double #1D1D1D;border-bottom:3px double #1D1D1D }

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue  { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
</style><script language='javascript'>
if ( location.search.indexOf('Post&CODE')!=-1 ){document.write("<style>.pformstrip { border-top:1px solid #0A0A0A;border-right:1px solid #0A0A0A;border-left:1px solid #0A0A0A }}</style>")}
</script>
</style><script language='javascript'>
if ( location.search.indexOf('UserCP&CODE=00')!=-1 ){document.write("<style>.forminput { background-color: #181818; background-image:url(http://);border: 3px double #0A0A0A }}</style>")}
</script>
```


----------



## deltanator (Dec 31, 2008)

akkk that got all messed up...


----------



## deltanator (Dec 31, 2008)

ok so its all fixed with code tag now , :s , btw thanks again the last time i was here i had locked my self out from all my files somehow and u peoples saved me ^_^


----------



## deltanator (Dec 31, 2008)

bump  ?


----------



## tomdkat (May 6, 2006)

You haven't provided enough context. The images you want to extend across the tops of the sections aren't identifiable in the HTML source since we have no idea what the image names are, etc.

Your best bet is to post a link to the site here so we can get the full context of the page and be able to make appropriate suggestions.

Peace...


----------



## deltanator (Dec 31, 2008)

http://z11.************.com/Unleashed_Pain/index.php?act=site


----------



## tomdkat (May 6, 2006)

Ok, the forum is blocking the URL, for some reason. 

Peace...


----------



## deltanator (Dec 31, 2008)

hang on...


----------



## deltanator (Dec 31, 2008)

ty to some of the help but problem still stands,


----------



## tomdkat (May 6, 2006)

Ok, the problem is how the background image is being set. The image in question is being set with the CSS style rule:

```
.maintitle { text-align:center;vertical-align:middle;font-weight:bold; color:#422509; letter-spacing:1px; padding: 8px 0px 8px 5px ;background-image: url(http://209.85.48.12/3553/197/upload/p241100.gif); background-position:center;background-repeat:no-repeat;width:100%; }
```
Since that image is 760x29 in dimension, if you display that table at any width wider than that, the background image will be centered. The background image won't scale, the way you want it to.

So, one thing you can do is restrict the width of the table from being more than say 765px. This way, when the browser window is wide (on widescreen displays), the table width never gets go wide that the background image gets centered (as it does now).

If you wanna give that a try, make these changes:

Remove the "width: 100%;" style from the .tableborder rule.

```
/*.tableborder { border:0px solid #345487;background-color:#0A0A0A; padding:0px; margin:0px; [b][color=red]width:100%;[/color][/b] }*/
.tableborder { border:1px solid red;background-color:#0A0A0A; padding:0px; margin:0px; }
```


```
<td class="row4" valign="top" width="90%">
   <!--MAIN-->
[b][color=red]<!--    <table class="tableborder" cellspacing="0" width="100%">-->
    <table class="tableborder" cellspacing="0" width="765">[/color][/b]
<tbody><tr>
 <td class="maintitle" colspan="2"><img src="index_files/cs_page.gif" alt="" border="0">&nbsp;<a href="http://z11.************.com/Unleashed_Pain/index.php?showtopic=2316">Event Schedule</a></td>
```
Change the width of the table containing that header image from being 100% to 765 (or some other width).

Attached is a screenshot. Ignore the red and green borders, I used them to see how things are laying out.

Peace...


----------



## deltanator (Dec 31, 2008)

ill get back to u asap once i try that.


----------



## deltanator (Dec 31, 2008)

it resulted in a partial fix but more problems resulted  ill get a pic


----------



## deltanator (Dec 31, 2008)

http://i222.photobucket.com/albums/dd135/deltonator/Capture1-13-2009-22336PM.jpg


----------



## deltanator (Dec 31, 2008)

my freind was able to do a fix on it , thanks 4 all your help!


----------



## tomdkat (May 6, 2006)

Keep in mind, the change I made above is a suggestion of the _kind_ of change you will need to make. Since the forum is using an overly complex combination of HTML tables and CSS DIVs for the layout, you will have to go through the code and figure out how to adjust the proper elements to format the way you want.

Another approach would be to change that top image to be in three parts: two corner images that remain static and a center image that can possibly scale based on the width of the center area. Of course, this will take effort and a different kind of strategy.

What I suggest you do is start adding colored borders around various elements (nested tables, etc) so you can identify the particular area you want to address and then you'll know what you need to focus on.

If you look for a solution you apply "blindly", you will always be confronted with this kind of problem. It might sound like a lot of work but once you get your head wrapped around it, it's not really that bad.

Take this page as an example:

http://z11.************.com/Unleashed_Pain/index.php?showtopic=2315

I know the link is busted but I think it's the same page you have in your latest screenshot.

Attached are screenshots sort of illustrating the process. Here is what I changed to get the borders to appear:

```
<script language="JavaScript" type="text/javascript">
<!--
function contact_admin() {

  // Very basic spam bot stopper
	  
  admin_email_one = 'serendipity9327';
  admin_email_two = 'hotmail.com';
  
  window.location = 'mailto:'+admin_email_one+'@'+admin_email_two+'?subject=Error on the forums';
  
}

//-->
</script>
[b][color=red]<!--<div class="tableborder">-->
<div class="tableborder" style="border: 1px solid red;">[/color][/b]
 <div class="maintitle"><img src="topc_files/nav_m.gif" alt="" height="8" width="8">&nbsp;Board Message</div>
</div>
[b][color=red]<!--<div class="tablefill"> Sorry, an error occurred. If you are unsure on-->
<div class="tablefill" style="border: 1px solid green;>[/color][/b] Sorry, an error occurred. If you are unsure on
how to use a feature, or don't know why you got this error message, try
looking through the help files for more information.<br><br>
  <b>The error returned was:</b>
  <br><br>
  <span class="postcolor" style="padding: 10px;">You do not have permission to view this topic</span>
  <br><br>
  <form action="http://z11.************.com/Unleashed_Pain/index.php" method="post">
```
One you can see how things are actually laying out, you can make adjustments accordingly. 

Peace...


----------



## tomdkat (May 6, 2006)

deltanator said:


> my freind was able to do a fix on it , thanks 4 all your help!


Sounds good. When did they make a change? The screenshots I posted were from a page that looked better than what you had posted last but the centering issue was still there.

Peace...


----------



## deltanator (Dec 31, 2008)

akk more problems discovered... , yea we will try that,


----------



## deltanator (Dec 31, 2008)

i think it will be ok.


----------

