这可以成功吗？ （列中多个ul）

Question

Can get something working with css3 for safari and firefox but ie won't have a piece of it. I'm outputting a list of shopping categorys and sub categorys with a seperate for each list.

This is what I've got (not working so far).. Any help would be most welcomed.

<div style="float:left; width: 232px;">
<?
$rowcount = 1;                          
$strSql = "SELECT * FROM Category ORDER BY CategoryName ASC";
$r = $db->select($strSql);
while ($row=$db->get_row($r, 'MYSQL_ASSOC')) {  
    $CategoryID = $row['CategoryID'];
    $CategoryName = $row['CategoryName'];
    ?>
     <div style="width: 232px; background-color:#f2f2f2; padding: 5px; margin-top: 5px; -webkit-border-radius: 4px; border-radius: 4px; overflow:hidden; padding-left: 5px;">
          <h1><a href="/<?=$colour?>/<?=$CategoryURL?>/" ><?=$CategoryName?></a></h1>
            <ul>
                  <?                        
                  $strSql2 = "SELECT 
                  SubCategory.SubCategoryID,
                  SubCategory.SubCategoryName,
                  SubCategory.SubCategoryURL,
                  SubCategory.CategoryID
                FROM
                  SubCategory
                WHERE
                  CategoryID = $CategoryID
                ORDER BY
                  SubCategoryName";
                  // echo "<pre>$strSql</pre>";
                  $r2 = $db->select($strSql2);
                  while ($row2=$db->get_row($r2, 'MYSQL_ASSOC')) {
                      $SubCategoryID = $row2['SubCategoryID'];
                      $SubCategoryName = $row2['SubCategoryName'];
                      $SubCategoryURL = $row2['SubCategoryURL'];
                  ?>    
                  <li><a href="/<?=$colour?>/<?=$CategoryURL?>/<?=$SubCategoryURL?>/"><?=$SubCategoryName?> (<?=$rowcount?>)</a></li>
                  <?
                  $rowcount++;
                  if ($rowcount == 35) { echo"</ul></div><div style=\"float:left; width: 232px;\"><ul>"; $rowcount = 0;} 
                  } // end get SubCategory
                  ?>
               <? if ($rowcount == 0) { echo""; } else {echo"</ul>";} ?>
               </div>       
         <? } // end get category list
?>     
        </ul> <!-- END CATEGORY UL -->
  </div>
</div>

Answer 1

An alternative would be to use a table-based layout, which in this case I don't think would be that bad. Tables are for tabular data and catalog categories would fit well. Edit: But you'd still have to figure out your PHP logic to get this working. Derp on my part.

Alternatively, there is the Columnizer jQuery plugin to do the trick automagically but I'm not fond of having to rely on a javascript-driven solution for layout elements. Although you could trigger it for only the browsers that don't support your CSS3 method via Modernizr. Still not a huge fan of this.

Can you post the CSS3 you used that is working in other browsers? Perhaps there is an available workaround that would do the trick. I'm still a bit fuzzy on the details for your end result. I'm focusing on the CSS aspect of your issue and less on the PHP. Finding a working CSS-driven solution is obviously far easier than trying to figure out the logic to divide your categories into columns accordingly.