Rounded Corner Box CSS problem

B

bigcougar

New Member
I have a rounded corner box, using 4 corner images. In the box, I have a PHP generated table that draws records from a database.

The problem is that my bottom two corners do not go on the bottom, but stay right below the upper corners (as if the box has no content)

I tried to fix that by generating the box in PHP, right where the table is generated but it made no difference.

How can I bring those two corers down?


This is the PHP version:

PHP: 
echo "<div class='roundcont'>";
echo "<div class='roundtop'>";
echo "<img src='tl.gif' alt='' width='15' height='15' class='corner' style='display: none' />";
echo "</div>";
echo "<div class='Right_FM'>";

echo "<table width='100%' border='0' align='left'>";

while($nt=mysql_fetch_array($result)){
$dt=date("F j, Y", $nt[post_time]);
echo "<tr>";
echo "<td width='30%'>$dt</td>";
echo "<td width='70%'><a href='http://troutsalmonchar.com/Forum/viewtopic.php?f=$nt[forum_id]&t=$nt[topic_id]'>$nt[post_subject]</a></td>";
echo "<tr>";
}

echo "</table>";
echo "</div>";

echo "<div class='roundbottom'>";
echo "<img src='bl.gif' alt=''width='15' height='15' class='corner' style='display: none' />";
echo "</div>";
echo "</div>";
 
T

tothepoint

New Member
You should probably change the whole code since using images directly, will be in your way when using complex HTML content in rounded boxes.

Using DIV's for setting up rounded corners is rather common way.

I would suggest the following way:

HTML: 
<div class="element-box">
  <div class="first">
    <div class="sec">
      <div class="third">
        <div class="fourth">
          <div class="box-content">
              <table class="my_table_in_box">
                 <tr class="odd">
                 <td> Column 1 </td>
                 <td> Column 2 </td>
                 <td> Column 3 </td>
                 <td> Column 4 </td>
                 </tr>
                 <tr class="even">
                 <td> Column 1 </td>
                 <td> Column 2 </td>
                 <td> Column 3 </td>
                 <td> Column 4 </td>
                 </tr>
              </table>
             <div style="clear: both; height: 0px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

and the CSS code to form the display:

Code: 
div.element-box div.first {
	background: transparent url(../images/rounded_box/element-box/bottom_right.gif) no-repeat bottom right;
}

div.element-box div.second {
	background: transparent url(../images/rounded_box/element-box/bottom_left.gif) no-repeat bottom left;
}

div.element-box div.third {
	background: transparent url(../images/rounded_box/element-box/top_right.gif) no-repeat top right;
}
div.element-box div.fourth {
	background: transparent url(../images/rounded_box/element-box/top_left.gif) no-repeat top left;
}

div.box-content {
	padding: 10px 10px 20px 10px;
}


You can also put in PHP function:

PHP: 
function wrap_in_box($cont='', $myClass=false) {
	$box = '';
	if (!empty($cont)) {
                $class = '';
                if ($myClass && is_string($myClass)) {
                    $class = ' '.$myClass;
                }
		$box ='<div class="element-box'.$class.'">
                            <div class="first">
                                <div class="sec">
                                   <div class="third">
                                            <div class="fourth">
                                                  <div class="box-content">
                                                      '.$cont.'
                                                  <div style="clear: both; height: 0px;"></div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>';
	}
	return $box;
}

You can us this function easily for any html content and wrap it in a box..

e.g: $myHtmlInABox = wrap_in_box($myHtml);

or add a custom CSS class definition:

e.g: $myHtmlInABox = wrap_in_box($myHtml, 'results_list');
 
B

bigcougar

New Member
Thank you Tothepoint!

The function produced the desired result but I have trouble calling the function with my php file (the one producing the table) as an argument.

I tried

$MyTable = include("Tables/MyTable.php");
and then calling the function

wrap_in_box($MyTable);

What happens is, the table gets printed at the assignment line and the value of $MyTable is interpreted as "1" which is what I get in between the corners.....
 
Last edited:
You must log in or register to reply here.
Top