At my wits end

New Member Joined: Jul 11, 2008 Posts: 2

I hate to ask, but I have tried to get this done for three days. I searched the forums and tried different methods, but have not been able to get anything to work. The problem is that my tables are not filling the sides. I am working on this locally, so I took a ss to show the problem. It can be seen here http://gathos.com/table.html

Here is the code

Code:

<?php


function OpenTable() {


   global $bgcolor1, $bgcolor2;


   echo"<table class=\"centerblock\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n";


   echo"            <tr>\n";


   echo"                <td>\n";


   echo"                <table class=\"table\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"background-image:url('themes/csf/images/ttf.gif')\">\n";


   echo"                    <tr>\n";


   echo"                        <td><img src=\"themes/csf/images/ttl.gif\" width=\"40\" height=\"40\" alt=\"\" class=\"left\" /></td>\n";


   echo"                        <td><img src=\"themes/csf/images/ttr.gif\" width=\"40\" height=\"40\" alt=\"\" class=\"right\" /></td>\n";


   echo"                    </tr>\n";


   echo"                </table>\n";


   echo"                <table class=\"table\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"background-image:url('themes/csf/images/spacer.gif')\">\n";


   echo"                    <tr>\n";


   echo"                        <td><img src=\"themes/csf/images/tlf.gif\" width=\"40\" height=\"100%\" alt=\"\" class=\"left\" /></td>\n";


   echo"                   <td>\n";


}


function CloseTable() {


   echo"                   </td>\n";


   echo"                        <td><img src=\"themes/csf/images/trf.gif\" width=\"40\" height=\"100%\" alt=\"\" class=\"right\" /></td>\n";


   echo"                    </tr>\n";


   echo"                </table>\n";


   echo"                <table class=\"table\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"background-image:url('themes/csf/images/tbf.gif')\">\n";


   echo"                    <tr>\n";


   echo"                        <td><img src=\"themes/csf/images/tbl.gif\" width=\"40\" height=\"40\" alt=\"\" class=\"left\" /></td>\n";


   echo"                        <td><img src=\"themes/csf/images/tbr.gif\" width=\"40\" height=\"40\" alt=\"\" class=\"right\" /></td>\n";


   echo"                    </tr>\n";


   echo"                </table>\n";


   echo"            </td>\n";


   echo"            </tr>\n";


   echo"        </table>\n";


}





function OpenTable2() {


    global $bgcolor1, $bgcolor2;


    echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"$bgcolor2\" align=\"center\"><tr><td>\n";


    echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"8\" bgcolor=\"$bgcolor1\"><tr><td>\n";


}





function CloseTable2() {


    echo "</td></tr></table></td></tr></table>\n";


}


?>

Any help would be greatly appreciated.

Posted: Sun Jan 31, 2010 10:23 am

I don't see anything wrong per say. Try removing all the line returns "\n".

Posted: Sun Jan 31, 2010 11:18 am

height="100%"
will not produce the desired results for images in most browsers.
find

Code:

   echo"                        <td><img src=\"themes/csf/images/tlf.gif\" width=\"40\" height=\"100%\" alt=\"\" class=\"left\" /></td>\n";

replace with

Code:

   echo"                        <td style=\"background-image:url('"themes/csf/images/tlf.gif');background-repeat:repeat-y;\"><img src=\"themes/csf/images/spacer.gif\" width=\"40\" height=\"1\" alt=\"\"  /></td>\n";

and use the same concept for the right side in the CloseTable function. I'm not sure what class="left" was so i removed it. If that breaks some other styling find class left and do some tinkering.. same with class right. My guess would be class left and right are used for the styling the corners, but without seeing the html/css code who knows Smile

Ideally, this styling would be in your css file and not inline, something like
themes/csf/style.css

Code:

.leftsideoftable {background-image:url('../images/tlf.gif');background-repeat:repeat-y;}

and then

Code:

   echo"                        <td class=\"leftsideoftable\"><img src=\"themes/csf/images/spacer.gif\" width=\"40\" height=\"1\" alt=\"\"  /></td>\n";

I would also stay away from common class names like left, right, center, etc... Eventually you will run into a module or some other addon that has used those same common class names; and then your theme has a bunch of layout issues.

Posted: Sun Jan 31, 2010 5:58 pm

Thank you very much!! It is working perfectly. I moved the styling to css. I am in the process of changing the image class names from common names as you suggested.