Sorting in Opera browser in frontend with YOOtheme

I have make the table for the frontend of my site, used one of YOOtheme templates (Daylight).

The table parts:

Header:

<?php $filter_order =& JRequest::getString('filter_order', '', 'post');
$filter_order_Dir =& JRequest::getString('filter_order_Dir', '', ‘post’);
?>

<form name='adminForm' method='post' action='index.php?option=com_chronoconnectivity&connectionname=zayavki_constel'>

<input type='hidden' name='filter_order' id='filter_order' value='<?php echo $filter_order; ?>' />

<input type='hidden' name='filter_order_Dir' id='filter_order_Dir' value='<?php echo $filter_order_Dir; ?>' />

Список приславших заявку на участие в расстановках:
<br /> 
<div align="center">{pagination}</div>

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="0"> 
<tbody> 

<thead>

<div class="clr" style="border-top: 3px solid #222; padding: 0px; margin-top: 0px;"></div>

<tr>

<th style="font-weight: bold; width: 5%;"><?php echo JHTML::_('grid.sort', '№', 'cf_id', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 10%;"><?php echo JHTML::_('grid.sort', 'Имя', 'name', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 15%;";><?php echo JHTML::_('grid.sort', 'E-mail', 'email', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 12%;"><?php echo JHTML::_('grid.sort', '№ телефона', 'phone', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 10%;"><?php echo JHTML::_('grid.sort', 'Дата', 'date', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 10%;">Роль</th>

<th style="font-weight: bold; width: 18%;"><?php echo JHTML::_('grid.sort', 'Время заявки', 'recordtime', @$filter_order_Dir, @$filter_order ); ?></th>

<th style="font-weight: bold; width: 10%;">Изменить</th>

<th style="font-weight: bold; width: 10%;">Удалить</th> 

</tr>


</thead>

</tbody>

</table>

<div class="clr" style="border-bottom: 1px solid #222; padding: 0px; margin-bottom: 0px;"></div>

Body:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="0"> 
  <tbody> 



    <tr<?php if ($i % 2) echo ' style="background-color: #EBEBEB;"';?>>
      <th style="width: 5%;">{cf_id}</td>
      <th style="width: 10%;">{name}</td>
      <th style="width: 15%;">{email}</td>
      <th style="width: 12%;">{phone}</td>
      <th style="width: 10%;">{date}</td>
      <th style="width: 10%;">{select}</td>
      <th style="width: 18%;">{recordtime}</td>
      <th style="width: 10%;">{edit_record}</td>
      <th style="width: 10%;">{delete_record}</td>
     <?php $i++ ?>
</tr>
  </tbody>
</table>

Footer:

<div class="clr" style="border-bottom: 3px solid #222; padding: 3px; margin-bottom: 10px;"></div>
{new_record}<br /> 
<script type="text/javascript"> 
window.addEvent('domready', function() { 
var limit_select = $('limit').options; 
if ( !limit_select ) return; 
for ( var i = 0; i < limit_select.length; i++ ) { 
if ( limit_select[i].value == 0 ) { 
limit_select[i].value = 250; 
limit_select[i].innerHTML = '250'; 
} 
} 
}); 
</script> 
<div align="center">{pagination}</div> 
<br />
</form>

It works perfectly with all browsers except Opera browser. There isn't header. At all. 🙄 When I switch my site to the non-YOOtheme templates, Opera shows the header, but the table is not exact.

Is any solution to couple Opera, YOO template and CC for good work with sorting?

Hi T34,

I don't have any YooTheme to test but we have seen JavaScript conflicts with YooThemes before.

Please post a link to the form so we can take a quick look.

Bob

Hi Bob!

Sure... The address is here.

Hi T34,

I suspect it may be either: (a) because you have a <div> between the <thead> and <tr> tags where ther should be no HTML; or (b) because your table tags are out of order and you have <tbody> before <thead>. XHTML specification is that the order is <thead>, <tfoot> then <tbody> if those elements are used.

Bob

PS You can simplify the layout by using a single table that starts in the Header box and ends in the Footer Box with just one (or more) <tr>s in the Body box.

Hi Bob!

Thanks a lot, Opera sorts now🙂.

There is only one bug of Opera now — it dosn't understand the table format properly in this form.
When I use this code in the BODY field:

<table style="text-align: left; width: 100%;" cellpadding="2" cellspacing="0" frame=below rules="rows" border="1" >
     <tr<?php if ($i % 2) echo ' style="background-color: #F5F5F5;"';?>>
      <td style="width: 8%;">{cf_id}</td>
      <td style="width: 23%;">{name}</td>
      <td style="width: 23%;">{date}</td>
      <td style="width: 23%;">{select}</td>
      <td style="width: 23%;">{recordtime}</td>
      <?php $i++ ?>
    </tr>
</table>

Opera shows borders around all cells like here, when other browsers show tag 'rules="rows"' normally.

Is any way to change this code for Opera shows only rows too it the forms?

Hi T34,

Sorry, I've now idea how Opera handles the 'rules' attribute - probably better to use CSS now.

Bob

Hi T34,

Sorry, I've now idea how Opera handles the 'rules' attribute - probably better to use CSS now.

Bob

Is it possible to use CSS in forms or I need to use external CSS files in this case?

Hi T34,

Please see this post

Bob

Thanks a lot, Bob! 🙂