SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS display: none wrecks table

    This is a weird one. I have a table that has sortable columns driven by both PHP and JavaScript. It works fine, until I tried to regulate the table rows with CSS.

    I created an alternate style sheet designed to display only table rows that feature African nations. I started by killing every row in this particular table:

    table.sortphp_ref tr { display: none; }

    Then I made the African rows reappear:

    table.sortphp_ref tr.afr { display: block; }

    It works, but the cells in the various rows aren't aligned. For example, the second cell in the second row may start 15pixels to the right of the second cell in the first row. It looks like a total mess.

    I can't learn much form my source code, as ALL the rows are displayed there.

    It's a database table that looks like this:

    echo '<table class="sortphp_ref" id="Table2" style="margin-left: auto; margin-right: auto; font-size: 85%;">
    <thead>
    <tr class="trhead">
    <th onclick="javascript:tsoSortTable(\'Table2\',0,\'AT\');">Name</th>
    <th onclick="javascript:tsoSortTable(\'Table2\',1,\'ND\');" style="background: #666; color: #fff;">Total</th>
    <th onclick="javascript:tsoSortTable(\'Table2\',2,\'ND\');" style="background: #666; color: #fff;">Land</th>
    <th onclick="javascript:tsoSortTable(\'Table2\',3,\'ND\');"style="background: #666; color: #fff;">Water</th>
    <th onclick="javascript:tsoSortTable(\'Table2\',4,\'AT\');">Comparative Area</th>
    <th onclick="javascript:tsoSortTable(\'Table2\',5,\'AT\');">&nbsp;</th>
    </tr>
    </thead>
    <tbody>';
    //<!-- BeginDynamicTable -->

    while ($row = mysql_fetch_array ($res))
    {

    //<!-- BeginDynamicTable -->
    $rowcounter=0;
    while ($row = mysql_fetch_array ($res)) {
    $c=$colors[$rowcounter++%$size];
    if($row['Seat'] == $row['Capital'])
    {
    $class='hilite';
    }
    else
    {
    $class='tdseat';
    }

    $ast = '<a href="#Notes">*</a>';
    if($row['areanotes'] ==''):
    $ast = '';
    endif;

    $aream = number_format($row["aream"]);
    $arealandm = number_format($row["arealandm"]);
    $areawaterm = number_format($row["areawaterm"]);
    echo <<<EOD
    <tr class="{$row["IDParent"]}" id="{$row["IDArea"]}" style="background-color:$c">
    <td class="tdname" style="width: 15%;">{$row["Name"]}</td>
    <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">$aream</td>
    <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">$arealandm</td>
    <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">$areawaterm</td>
    <td class="left">{$row["areacomp"]}</td>
    <td class="left" style="font-size: 200%;">$ast</td>
    </tr>
    EOD;
    }
    }
    }
    ?>
    </tbody>
    </table>

    Any tips???

  2. #2
    SitePoint Zealot pionar's Avatar
    Join Date
    Nov 2003
    Location
    Indianapolis
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you have an online version of this, or the HTML output of the PHP?

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pionar
    do you have an online version of this, or the HTML output of the PHP?
    Sorry, it's a big project and I probably can't get it online until later today. I pasted some of the source code below, though.

    I just changed the styles to display only the header row and the rows representing Angola and Kenya, and they're still out of alignment. As near as I can tell, all the opening and closing row and cell tags are present. Here's what the HTML for Angola looks like:

    <tr class="afr" id="ago" style="background-color:">
    <td class="tdname" style="width: 15%;">Angola</td>
    <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">1,246,700</td>
    <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">1,246,700</td>
    <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">0</td>
    <td class="left">slightly less than twice the size of Texas</td>
    <td class="left" style="font-size: 200%;"></td>
    </tr>

    I pasted SOME OF the source code below.

    Thanks.



    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><!-- For some bizarre reasondata from table basics won't display without the line below! -->
    <title>GeoWorld &gt; </title>
    <meta name="description" content="GeoWorld &gt;  (For fearless learners aged 9 to 99)" />
    <meta name="keywords" content=", geography, education, learning, fun, GeoWorld, David Blomstrom" />

    <meta name="mssmarttagspreventparsing" content="true" />
    <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="David Blomstrom" />
    <script src="/a1/js/swapclass.js" type="text/javascript"></script>
    <script src="/a1/js/swapclass2.js" type="text/javascript"></script>
    <script src="/a1/js/ss.js" type="text/javascript"></script>

    <script src="/a1/js/sort1.js" type="text/javascript"></script>
    <script src="/a1/js/freedom.js" type="text/javascript"></script>
    <script src="/a1/js/typewriter.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">

    <script type="text/javascript">
    function commafy(num){
    num+='',dec=(n=num.indexOf("."))!=-1?num.substring(n):"";
    num=""+Math.floor(num);
    var re=/(\d+)(\d{3})/ ;
    while(re.test(num)) num=num.replace(re,"$1,$2");
    return num + dec;
    }

    onload=function(){
    var tb=document.getElementById("Table2").getElementsByTagName("TBODY")[0]
    var trs=tb.getElementsByTagName("TR"),trslen=trs.length;
    while(trslen--){
    td1=trs.item(trslen).getElementsByTagName("TD").item(1);
    td1.firstChild.data=commafy(td1.firstChild.data);
    }
    }
    </script>

    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    //-->
    </script>
    <script language="JavaScript" type="text/javascript"> <!--Begin Hide document.getElementById("navfeatures").style = "position:absolute;top:0px;left:0px;z-index:100;position:fixed;"; // End Hide--> </script>
    <link href="/a1/css/aaa.css" rel="stylesheet" type="text/css" />

    <link href="/a1/css/ref.css" rel="stylesheet" type="text/css" />



    <!--
    <link href="/a1/css/.css" rel="stylesheet" type="text/css" />
    <link href="/a1/css/themes/peace.css" rel="alternate stylesheet" type="text/css" title="Peace" />
    <link href="/a1/css/themes/war.css" rel="alternate stylesheet" type="text/css" title="War" />
    <link href="/a1/css/themes/patus.css" rel="alternate stylesheet" type="text/css" title="Patriotism" />
    <link href="/a1/css/themes/nationalism.css" rel="alternate stylesheet" type="text/css" title="Nationalism" />
    <link href="/a1/css/themes/corporate.css" rel="alternate stylesheet" type="text/css" title="Corporate" />
    <link href="/a1/css/themes/conspiracy.css" rel="alternate stylesheet" type="text/css" title="Conspiracy" />
    -->
    <link href="/a1/css/themes/africa.css" rel="alternate stylesheet" type="text/css" title="Africa" />
    <link rel="shortcut icon" href="favicon.ico" />

    <style type="text/css">
    #areashow { display: block; }
    </style>
    </head><body class="body" id="bodyarea" onload="P7_swapClass(0,'
    none','showIt','hideIt','div');typeWriter('quote',50);initialize()">
    <div id="body2">
    <div class="pagesymbol">&nbsp;</div>
    <div class="body2" id="body2area">
      <div class="body3" id="body3area">
        <h1 class="title" id="titlearea">Area (Size)</h1>

    <div class="divtop">
      <div class="subtitle" id="subarea"><span class="subspan">
      How big is that nation?</span></div>
      <div class="quotewrap" id="qwraparea">
    <div class="quotearea" id="quote">
    </div>
        <div class="sig" id="sigarea"></div>
      </div><!-- EndQuoteWrap -->
    <div class="toplinks" id="toplinksarea">
    <a href="/index.php"><img style="float: left; position: relative; bottom: 5px;" src="/images/logo.gif" width="25" height="25" alt="Geobop logo" /></a>&nbsp;&gt;

    <a href="/reference/">Reference</a> &gt; 
     <a href="/reference/geog/">Geography</a> &gt; 
    <span class="navhere">Area (Size)</span><br />


      

    <div style="position: relative; right: 30px; top: 5px;"><span class="topicslink"><a href="/topics/">Topics</a></span><span class="gloslink"><a href="/reference/glossary/">Glossary</a></span><span class="aboutlink"><a href="/about/">About GeoWorld</a></span><span class="searchlink"><a href="http://www.geobop.org/about/search/">Search</a></span></div>

      </div>
    </div><!-- EndDiTop -->
    <div id="vote" style="padding: 2px; background: #fff; border: 1px solid #000;top:28px;right:0px"><a href="http://www.politix.us/vote/"><img src="/images/vote.gif" width="100" height="33" alt="ote Logo" /></a></div>
    <!--FREEDOMWARE-->
    <div id="vote" style="padding: 2px; background: #fff; border: 1px solid #000;top:28px;right:0px"><a href="http://www.politix.us/vote/"><img src="/images/vote.gif" width="100" height="33" alt="ote Logo" /></a></div>
        <table id="tablemain" cellspacing="0" cellpadding="0">
          <tr class="rowmain">
            <td class="tdleft" id="tdleftarea">&nbsp;</td>
            <td class="tdcenter" id="tdcenterarea">

    <script language="JavaScript" type="text/javascript">
    <!--
    // Demonstration Only

    function tsoSelect(){
     tsoDo=tsogEBId('
    tsoSelectBox').options[tsogEBId('tsoSelectBox').selectedIndex].value;
     if (tsoDo!=''){ eval(tsoDo); }
    }
    //-->
    </script>

    <script language="JavaScript" src="../sftPart3.js" type="text/javascript"></script>

    <script>
    title='
    Table Sort Order';
    // titleY=50;
    // titleX=140;
    if (document.all){ center=Math.round(document.body.clientWidth/2); }
     else if (document.getElementById){ center=Math.round(window.innerWidth/2); }
    </script>

    <script>
    document.write(
    '
    <div class="title" style="top:'+(titleY-1)+'px;left:'+(center-titleX-2)+'px;color:gray;" >'+title+'</div>',
    '
    <div class="title" style="top:'+(titleY+1)+'px;left:'+(center-titleX+2)+'px;color:black;" >'+title+'</div>',
    '
    <div class="title" style="top:'+(titleY)+'px;left:'+(center-titleX)+'px;color:red;" >'+title+'</div>',
    '');
    </script>

    <SCRIPT language=JavaScript type=text/javascript>
    <!--
    if (UpdateJS){
     UpdateDate();
    }
    else {
     document.write('
    Off Line Version');
    }
    <!---->
    </SCRIPT>

    <div class="countytext" style="padding: 0px; margin-bottom: 15px; background: #eee;
     border-top: 1px solid #000; border-bottom: 1px solid #000;">
    <div style="font-size: 85%; line-height: 130%; border-top: 1px dashed #000;">
    <p>Use the sort function above to sort the columns, in ascending or descending
      order, according to several categories of information.</p>

    <p>For more information about geography, visit Reference &gt; <a href="/reference/geography/">Geography</a>
    and Topics &gt; <a href="/topics/geography/">Geography</a>. Learn more about physiography (physical
    geography) and geology from <a href="http://paleozoo.geoworld.org/">PaleoZoo</a>.</p>
    </div>
    </div><!--EndCountyText-->




    <div class="formdiv" style="background: #000; color: #fff;">
      <form action="index.php" method="get">
        <select name="order">
          <option value="1">Name</option>
          <option value="2">Highest Point</option>
          <option value="3">Highest Elevation (m)</option>
          <option value="4">Lowest Point</option>

          <option value="5">Lowest Elevation (m)</option>
          <option value="6">Coordinates (N-S)</option>
          <option value="7">Coordinates (E-W)</option>
          <option value="8">Map Reference</option>
          <option value="9">Area (sq km)</option>
          <option value="10">Land Area (sq km)</option>

          <option value="11">Water Area (sq km)</option>
          <option value="12">Borders (km)</option>
          <option value="13">Coastline</option>
          <option value="14">Territorial Seas</option>
          <option value="15">Contiguous Zone</option>
          <option value="16">Continental Shelf</option>

          <option value="17">Exlusive Economic Zone</option>
          <option value="18">Exclusive Fishing Zone</option>
          <option value="19">Land Use</option>
          <option value="20">Crops</option>
          <option value="21">Other Land Use</option>
          <option value="22">Irrigation</option>

        </select>
        <input type="radio" name="direction" value="0" />
        Ascending
        <input type="radio" name="direction" value="1" />
        Descending
        <input type="submit" name="submit" value="Submit" />
      </form>
    </div>
    <div style="padding-bottom: 10px; font-size: 85%; line-height: 130%; color: #f00; text-align: left;">
    Click the <strong>bold-face words</strong> at the top of the columns below to sort those columns,
    or use the sort function above to sort by even more variables.</div>



    <table class="sortphp_ref" id="Table2" style="margin-left: auto; margin-right: auto; font-size: 85%;">
    <thead>
    <tr class="trhead">
    <th onclick="javascript:tsoSortTable('
    Table2',0,'AT');">Name</th>
    <th onclick="javascript:tsoSortTable('
    Table2',1,'ND');" style="background: #666; color: #fff;">Total</th>
    <th onclick="javascript:tsoSortTable('
    Table2',2,'ND');" style="background: #666; color: #fff;">Land</th>
    <th onclick="javascript:tsoSortTable('
    Table2',3,'ND');"style="background: #666; color: #fff;">Water</th>
    <th onclick="javascript:tsoSortTable('
    Table2',4,'AT');">Comparative Area</th>
    <th onclick="javascript:tsoSortTable('
    Table2',5,'AT');">&nbsp;</th>

    </tr>
    </thead>
    <tbody>   <tr class="" id="" style="background-color:#eee">
         <td class="tdname" style="width: 15%;">Akrotiri</td>
         <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">123</td>
         <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">0</td>
         <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">0</td>
         <td class="left">about 0.7 times the size of Washington, DC</td>

         <td class="left" style="font-size: 200%;"><a href="#Notes">*</a></td>
       </tr>

    <tr class="afr" id="ago" style="background-color:">
      <td class="tdname" style="width: 15%;">Angola</td>
      <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">1,246,700</td>
      <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">1,246,700</td>
      <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">0</td>
      <td class="left">slightly less than twice the size of Texas</td>
      <td class="left" style="font-size: 200%;"></td>
    </tr>





    <tr class="afr" id="ken" style="background-color:">

         <td class="tdname" style="width: 15%;">Kenya</td>
         <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">582,650</td>
         <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">569,250</td>
         <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">13,400</td>
         <td class="left">slightly more than twice the size of Nevada</td>
         <td class="left" style="font-size: 200%;"></td>

       </tr>


    <tr class="afr" id="zwe" style="background-color:#cfc">

         <td class="tdname" style="width: 15%;">Zimbabwe</td>
         <td class="numeral" style="border-right: 1px dashed #000; width: 10%;">390,580</td>
         <td class="numeral" style="background: #cfc; border-right: 1px dashed #000; width: 10%;">386,670</td>
         <td class="numeral" style="background: #cff; border-right: 1px solid #000; width: 10%;">3,910</td>
         <td class="left">slightly larger than Montana </td>
         <td class="left" style="font-size: 200%;"></td>

       </tr></tbody>
    </table> 


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •