Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

PHP Script: overflow property controlling echoed cross-browser table whose content exceeds element's box size

This script is called overflow-property-controlling-echoed-cross-browser-table-whose-content-exceeds-elements-box-size.php

In searching the Internet, we found no evidence of a PHP script illustrating the use of the overflow property to control echoed cross-browser table whose content exceeds element's box size. We used this in View Scheduler and Edit Scheduler and it displayed MySQL table contents.

For our test, below, we simply use three arrays with too much content to fit within the width of the 94 pixel wide table cell boxes we defined in the CSS styles. The content that passed the right edge of the cells simply disappeared. It is easy to define CSS styles that let the boxes expand to encompass the content (just don't define the width attribute), and defining CSS styles that let the boxes' content wraparound to the next line is easy too, by use of the scroll property. And of course you can add a break tag or two in your content so that it is forced into multiline display. We found a need to store actual <BR> tags in a MySQL table to separate two names that we wanted on separate lines in a table cell. If you need word-wrap to break long words like URLs in a relatively small table cell, you can use styles like width:150px;max-width:150px;min-width:150px;word-wrap:break-word; which we did in our message inbox script, using width:824px;border:1px solid blue;text-align:center;table-layout:auto to style the table this cell resided in. The idea was to keep the table all on a 1024 pixel wide screen, cross-browser, with no horizontal scrollbar needed, regardless of content. Content without specific styles to prevent it will enlarge a table and force a scrollbar when the content makes it do so.

The styles on the script below are similar to the styles in Edit Scheduler, where it was essential that all table cells were a set amount apart in vertical and horizontal directions so that editing could occur by clicking in cell boxes after selecting names from a dropdown list. Since there were no links on words, this relied on cross-browser cursor position reading and the use of Ajax to edit the MySQL table on the fly onscreen with no page refresh. We forced not only exact table size and position on the screen, but also specific behavior of content getting displayed in table cells.

For our test, below, we used three for loops to fill the table cells with array element values. Note that the side column of table cells uses padding to position content. The best way to do this is with an external div that defines the size and an internal div with the padding styles. This seems to work best in all the browsers. The table cells get this style for sizing: width:94px;height:30px;max-width:94px;min-width:94px;max-height:30px;min-height:30px; and these styles for dealing with content overflow: overflow:hidden;white-space:nowrap;. If you really need table cell sizes to be precise and absolute, cross-browser, max-width and max-height need to supplement width and height attributes.

This script is called overflow-property-controlling-echoed-cross-browser-table-whose-content-exceeds-elements-box-size.php

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
background-color:#eee;overflow:hidden;white-space:nowrap;font-family:"Times New Roman", Times, serif;}
.zz{padding:7px 7px 7px 17px}

<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box. Here we use the hidden property—and all the content overflowed and the excess disappeared except "Test<BR>overflow". This page works right on IE 6 to IE9, Firefox, Opera, Chrome, and Safari.</p>


$ar=array('bobo ralph higginbottom','bobo ralph higginbottom','bobo ralph higginbottom','bobo ralph higginbottom');
$kid=array('tweedledee dumbendorfer','tweedledee dumbendorfer','tweedledee dumbendorfer','tweedledee dumbendorfer');
$r=array('shewolf slimey frognuts','shewolf slimey frognuts','shewolf slimey frognuts','shewolf slimey frognuts');

echo "<div class='table'><table border='1'>";
echo "<tr> <th><div class='z'>Test<BR>overflow</div></th>";
for($i = 0; $i < 4; $i++){
echo "<th><div class='z'>".$ar[$i]."</div></th>";}
echo "</tr>";
for($j = 0; $j < 4; $j++){
echo "<tr><td><div class='z'><div class='zz'>";
echo $r[$j];
echo "</div></div></td>";
for($k = 0; $k < 4; $k++){
echo "<td><div class='z'>".$kid[$k]."</div></td>";}
echo "</tr>";

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