checkout_payment.php fix, IE7 problem

[Roaddoctor]

I've applied the checkout_payment fix contribution to move the radio buttons to the left of the payment choices.

Checkout Payment Fix

 

I am having a little trouble getting the alignment of the payment choices to work properly in IE7. It looks good in FF.

 

Here is a few screenshots of what the problem is, followed by the code section that needs to be fixed. Thank you in advance for any help.

 

With Firefox - works perfectly

 

With IE7 - weird indent increase with each payment choice

 

IE7 table structure

 

IE7 table cells

 

the code for this section

<tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
 // ** GOOGLE CHECKOUT **
 // Skips Google checkout as a payment option on the payments page since that option
 // is provided in the checkout page

 $selection = $payment_modules->selection();
 for($i=0, $n=sizeof($selection); $i<$n; $i++) {
if($selection[$i]['module'] == 'GoogleCheckout') {
  array_splice($selection, $i, 1);	
  break;   
}
 }
// ** END GOOGLE CHECKOUT **
 if (sizeof($selection) > 1) {
?>
		  <tr>
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td class="main" width="50%" valign="top" align=left><b><?php echo TITLE_PLEASE_SELECT; ?></b><br><?php echo tep_image(DIR_WS_IMAGES . 'arrow_east_south.gif'); ?></td>
			<td class="main" width="50%" valign="top"><?php echo TEXT_SELECT_PAYMENT_METHOD; ?></td>
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
<?php
 } else {
?>
		  <tr>
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td class="main" width="100%" colspan="2"><?php echo TEXT_ENTER_PAYMENT_INFORMATION; ?></td>
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
<?php
 }

 $radio_buttons = 0;
 for ($i=0, $n=sizeof($selection); $i<$n; $i++) {
?>
		  <tr align="left">
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td colspan="2"><table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
if ( ($selection[$i]['id'] == $payment) || ($n == 1) ) {
  echo '				  <tr id="defaultSelected" class="moduleRowSelected" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
} else {
  echo '				  <tr class="moduleRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
}
?>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
						  <td class="main" align="left" width="25"> 
<?php
if (sizeof($selection) > 1) {
  echo tep_draw_radio_field('payment', $selection[$i]['id']);
} else {
  echo tep_draw_hidden_field('payment', $selection[$i]['id']);
}
?>
				</td>
						  <td class="main" align="left"><b><?php echo $selection[$i]['module']; ?></b></td>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			  </tr>
<?php
if (isset($selection[$i]['error'])) {
?>
			  <tr>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
				<td class="main" colspan="4"><?php echo $selection[$i]['error']; ?></td>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			  </tr>
<?php
} elseif (isset($selection[$i]['fields']) && is_array($selection[$i]['fields'])) {
?>
			  <tr>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
				<td colspan="4"><table border="0" cellspacing="0" cellpadding="2">
<?php
  for ($j=0, $n2=sizeof($selection[$i]['fields']); $j<$n2; $j++) {
?>
				  <tr>
					<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
					<td class="main"><?php echo $selection[$i]['fields'][$j]['title']; ?></td>
					<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
					<td class="main"><?php echo $selection[$i]['fields'][$j]['field']; ?></td>
					<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
				  </tr>
<?php
  }
?>
				</table></td>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			  </tr>
<?php
}
?>
			</table></td>
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
<?php
$radio_buttons++;
 }
?>
		</table></td>
	  </tr>
	</table></td>
  </tr>

 

Thank you for any help!

[Roaddoctor]

Will it help if I say pretty please? :)

 

It has to be something right in here...

 

  $radio_buttons = 0;
 for ($i=0, $n=sizeof($selection); $i<$n; $i++) {
?>
		  <tr align="left">
			<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td colspan="2"><table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
if ( ($selection[$i]['id'] == $payment) || ($n == 1) ) {
  echo '				  <tr id="defaultSelected" class="moduleRowSelected" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
} else {
  echo '				  <tr class="moduleRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
}
?>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
						  <td class="main" align="left" width="25"> 
<?php
if (sizeof($selection) > 1) {
  echo tep_draw_radio_field('payment', $selection[$i]['id']);
} else {
  echo tep_draw_hidden_field('payment', $selection[$i]['id']);
}
?>
				</td>
						  <td class="main" align="left"><b><?php echo $selection[$i]['module']; ?></b></td>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			  </tr>

 

arghh silly IE is makin me mad.

[Guest]

IE is now even more of a pain with the new launch. I had a problem yesterday on another project, and you know, at the end I was forced the state (width="") the width of each cell, exact. And, not only this, the stated width of all cells in a row had to equal exactly the width of the table.

 

Now, I dont know if this is your prob but I guess it is. So, in this part:

 

<table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
if ( ($selection[$i]['id'] == $payment) || ($n == 1) ) {

 

I would specify exakt the width of the table and make sure that in every <td> cell within this table, to specify a width and make sure the cumulative sum equals exactly the width of the table :-)

 

Comprende?

[Roaddoctor]

IE is now even more of a pain with the new launch. I had a problem yesterday on another project, and you know, at the end I was forced the state (width="") the width of each cell, exact. And, not only this, the stated width of all cells in a row had to equal exactly the width of the table.

 

Now, I dont know if this is your prob but I guess it is. So, in this part:

 

<table border="0" width="100%" cellspacing="0" cellpadding="2">
<?php
if ( ($selection[$i]['id'] == $payment) || ($n == 1) ) {

 

I would specify exakt the width of the table and make sure that in every <td> cell within this table, to specify a width and make sure the cumulative sum equals exactly the width of the table :-)

 

Comprende?

 

Thanks for the direction

 

All I had to add was a width="100%" to the following line. All good now.

 

<td width="100%" class="main" align="left"><b><?php echo $selection[$i]['module']; ?></b></td>