[SOLVED] FireFox Rocks I.E.'s Socks Off... but help me anyway?

[vozzek]

Hi all,

 

Is there any way to avoid the stupid line of blank space Internet Explorer is jamming onto my webpage whenever I enter <form></form> tags that span more that one table?  Because sometimes I <i><b>need</i></b> them to span more than one table.

 

I.E. Creates blank space when I do this.  Firefox does not.  Yet one more reason why everyone's I.E. icon should be banished to the nearest recycle bin, and then emptied.

 

Visually, here's what I'm talking about:

 

WHEN VIEWED IN FIREFOX:

 

 

WHEN VIEWED IN I.E. :

 

 

Any easy way to prevent this?  Thanks in advance.

 

 

 

 

 

[phpQuestioner]

have you set your cellpadding and cellspacing to "0" for each of your tables?

[Dragen]

I must say ie generally does this correctly and firefox doesn't display a gap because it's better at hiding errors.

as phpQuestioner said it could be your cellpadding or even cellspacing. Then again it could be that you got a blank line between <form> and <table>..

Or you've got the <form> inside the first table, but the closing </form> outside the second table.

Just some ideas.

 

[vozzek]

Can I do this?

 

<table>
  <tr>
    <td>  Column 1 stuff
    </td>
    <td>  Column 2 stuff
    </td>
    <td>  Column 3 stuff ( I need a small form in here...)
    <form>
    </form>
    </td>
  </tr>
</table>

 

Because this really seems to be messing up the alignment.

 

What are the set rules for inserting <form></form> tags within tables, rows, and columns?

 

[Dragen]

yeah that's fine. basically what you can do with forms and tables is this;

outside:

<form>
<table>
<tr>
	<td>everything in the table will be inside the form</td>
</tr>
</table>
<table>
<tr>
	<td>but I can also add another table if I like</td>
</tr>
</table>
</form>

 

inside:

<table>
<form>
<tr>
	<td>everything in the table will be in the form</td>
</tr>
<tr>
	<td>even this!</td>
</tr>
</form>
</table>

 

in trs:

<table>
<tr>
<form>
	<td>only tds in this row will be inside the form</td>
	<td>like this one</td>
</form>
</tr>
</table>

 

or in the tds:

<table>
<tr>
	<td>
		<form>
		only the text in this td will be in the form
		</form>
	</td>
	<td>this wont</td>
</tr>
</table>

 

I hope that clears up some confusion.

If it's causing trouble with gaps try changing it to this:

<table>
  <tr>
    <td>  Column 1 stuff
    </td>
    <td>  Column 2 stuff
    </td>
    <td>  Column 3 stuff ( I need a small form in here...)<form>
    </form></td>
  </tr>
</table>

[vozzek]

Thanks very much for taking the time to write all that.  You explained it well.

 

The gap problem I'm having... I'm not sure why it's happening.  The page is made from a template (if that matters).  I have SEVERAL tables on the form, with some of them containing <input>'s, so what I did was place the <form> tags outside of everything... like so:

 

<form>  <--- This is placed right at the very beginning of the editable portion of the page.
<table 1>
</table 1>
<table 2>
</table 2>
<table 3>
</table 3>... etc...
</form>  <---  This is the last thing before the very end of the editable portion of the page.

 

The gap still happens.  Dunno why.  If you wanna see the entire page's html, I can paste it.

<b>EDIT: In fact, here it is:</b>

 

<form ACTION="update_cart.php" method="POST" name="updatecartform" id="updatecartform">
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="Images/main_box_view_cart.jpg" width="800" height="70" /></td>
  </tr>
  <tr>
    <td><img src="Images/spacer_20.jpg" width="800" height="20" /></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor="#FFFFFF"></td>
    <td width="700" class="cart_header">Your Shopping Cart</td>
    <td width="50" bgcolor="#FFFFFF"></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor="#FFFFFF"></td>
    <td width="387" class="cart2"></td>
    <td width="313" class="cart_header">Delivery</td>
    <td width="50" bgcolor="#FFFFFF"></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor="#FFFFFF"></td>
    <td width="310" class="cart_header">Product</td>
    <td width="70" class="cart_header">Price</td>
    <td width="100" class="cart_header">Surcharge</td>
    <td width="155" class="cart_header">Qty</td>
    <td width="65" class="cart_header" align="center">Total</td>
    <td width="50" bgcolor="#FFFFFF"></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor="#FFFFFF"></td>
    <td width="700" class="cart2"><img src="Images/cart_spacer_10.jpg" width="700" align="middle" /></td>
    <td width="50" bgcolor="#FFFFFF"></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
<td width='50' bgcolor='#FFFFFF'></td>
<td width='310' class='cart2'><p>
Solo Chenille Braided Rug - Sunny<br />5 feet 6 inches Round ($90)</td>
<td width='85' class='cart2'>
$99.00</td>
<td width='85' class='cart2'>
</td>
<td width='55' class='cart2'>
<input type='text' size='1' maxlength='2'  id=qty1 name='qty[206]' value=1 />
</td>
<td width='100' class='cart2'>
<input name='Remove' type='button' id='Remove' value='Remove' class='box' onClick=window.location.href='delete_from_cart.php?cid=206' />
</td>
<td width='65' class='cart2' align='right'>
$99.00</p></td>
<td width='50' bgcolor='#FFFFFF'></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor="#FFFFFF"></td>
    <td width="700" class="cart2"><img src="Images/cart_spacer_10.jpg" width="700" align="middle" /></td>
    <td width="50" bgcolor="#FFFFFF"></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor='#FFFFFF'></td>
    <td width="700" class="cart2"> </td>
    <td width="50" bgcolor='#FFFFFF'></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor='#FFFFFF'></td>
    <td width="480" class="cart2"> </td>
    <td width="155" class="cart_header">Sub Total:</td>
    <td witdh="65" class="cart2" align="right">$99.00</td>
    <td width="50" bgcolor='#FFFFFF'></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor='#FFFFFF'></td>
    <td width="700" class="cart2"> </td>
    <td width="50" bgcolor='#FFFFFF'></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="50" bgcolor='#FFFFFF'></td>
    <td width="120" class="cart2">
    <input type="image" src="Images/button_update_cart.jpg" name="Submit" value="Submit" onMouseOver="this.src='Images/button_update_cart_rollover.jpg'" onMouseOut="this.src='Images/button_update_cart.jpg'" /></td>
    <td width="30" class="cart2"> </td>
    <td width="120" class="cart2"><img src="Images/button_empty_cart.jpg" name="Empty" value="Empty" onmouseover="this.src='Images/button_empty_cart_rollover.jpg'" onmouseout="this.src='Images/button_empty_cart.jpg'" onclick="window.location.href='delete_from_cart.php?cid=0'" /></td> 
    <td width="30" class="cart2"></td>
    <td width="160" class="cart2">
    <img src="Images/button_continue_shopping.jpg" name="Continue" value="Continue" onmouseover="this.src='Images/button_continue_shopping_rollover.jpg'" onmouseout="this.src='Images/button_continue_shopping.jpg'" onclick="window.location.href='room_decor.php'" /></td>
    <td width="120" class="cart2"> </td>
    <td width="120" class="cart2"> 
    <img src='Images/button_checkout.jpg' name='Checkout' value='Checkout' onMouseOver='this.src="Images/button_checkout_rollover.jpg"' onMouseOut='this.src="Images/button_checkout.jpg"' onclick='window.location.href="checkout_login.php"' />    </td>
    <td width="50" bgcolor='#FFFFFF'></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" bgcolor='#FFFFFF'></td>
    <td width="700" class="cart2"> </td>
    <td width="50" bgcolor='#FFFFFF'></td>
  </tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td><img src="Images/spacer_20.jpg" width="800" height="20" /></td>
  </tr>
</table>
</form>

 

[themistral]

Hiya,

 

This could be a css problem - if you style the form it might get rid of the space.

 

Try something along the lines of

 

<form style="margin:0;">

[vozzek]

HOLY #?%$@!!!!!!!!!!!!!!!!

 

THANK YOU!!!!!

 

;D ;D ;D ;D ;D ;D ;D