form elements within tables and divs (ie vs ff)

[scottybwoy]

Yo Yo ppl,

 

I have designed a website, that is pure div layout and created a clean way (well I think its clean) to style my form elements.

 

Problem is for another website its laid out via tables (OsCommerce site).  I thaught I could just integrate my css from a -> b and it would work.  So just like any other computer related action, its not the case.  It works fine in ff, but ie 6sp1 says no.  I found by disabling the css in ie, it displays much better.  Here's some code to give you a better picture.

div.row {
  clear: both;
  height: 1%;
  padding: 0.4em 0; }
div.row label {
  float: left;
  width: 35%;
  text-align: right;
  font-weight: bold; }
div.row input, div.row select {
  float: right;
  width: 40%;
  margin-right: 20%;
  padding: 2px 0.5% 1px 0.5%;
  font-family: Verdana, Sans;
  font-size: 0.8em;
  color: #000080;
  border: solid 1px #3f547f; }

And some html :

<tr>
		            <td width="49%" valign="top">
		              <h3><?=HEADING_NEW_CUSTOMER?></h3>
		              <p><?php echo TEXT_NEW_CUSTOMER . '<br /><br />' . TEXT_NEW_CUSTOMER_INTRODUCTION; ?></p>
		              <div class="row" style="text-align:right; padding-right:10px;">
		              	<?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?>
		              </div>
			          </td>
		            <td align='center' class="v_divider" align="absmiddle" width="2%"><?php tep_image(DIR_WS_IMAGES . 'pixel_trans.gif') ?></td>
		            <td width="49%" valign="top">
		            	<h3><?=HEADING_RETURNING_CUSTOMER?></h3>
		              <p><?=TEXT_RETURNING_CUSTOMER?></p>
		            	<div class="row">
		          		  <label for='email_address'><?=ENTRY_EMAIL_ADDRESS?></label>
		          		  <?=tep_draw_input_field('email_address')?>
		            	</div>
		          		<div class="row">
		          			<label for='password'><?=ENTRY_PASSWORD?></label>
		              	<?=tep_draw_password_field('password')?>
		              </div>
		              <div class="row smallText" style="text-align:center;">
		              	<?php echo '<a href="' . tep_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . TEXT_PASSWORD_FORGOTTEN . '</a>'; ?>
		              </div>
		              <div class="row" style="text-align:right;">
		              	<?php echo tep_image_submit('button_login.gif', IMAGE_BUTTON_LOGIN, 'style="width:100px; border:0; margin-right:10px;"'); ?>
		              </div>
								</td>
		          </tr>

 

What is happening is (in ie6) is that the first <td> is all scrunched up small the third expands miles to the right (I'm not exaggerating when I say miles, its like 100 100%'s).  It works fine in ff and when the same css is used contained in divs or even framesets and forms.  Any idea on the dirrefernt behaviour between these elements and how I can get around it please.  P.S. It acts like this on every page I have input + labels laid out like so.

 

Thanks for your help

[scottybwoy]

bump.  Any ideas?

[haku]

got a link?

[scottybwoy]

Hi haku,

 

I have played around a bit since and am trying to convert it to div layout instead of tables.  I have also uploaded it to a test area, instead of my localhost for you.

 

Check out this link in FF and IE6 to see the difference.

 

I'm using the same css in this page too, but has div layout, and works fine.

 

Thanks for your time

[haku]

I only have IE6 at my office, not at home, and I'll be at an exhibition all day tomorrow! So unfortunately, I won't be able to check it anytime soon. Sorry! Maybe someone else can get to it.