hidden fields creating space in html tabe display

I have a form with a few hidden space. However, these fields are taking up space in my html table display, thereby distorting the entire layout. How do I ensure that these hidden fields do not take up space?
nmicheleAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ncooConnect With a Mentor Commented:
I've had this problem once, add the style .invisible to your stylesheet and use in your inputs

Like so:

<input type="hidden" class="invisible" name="whatever"/>

Or like:

<input type="hidden" class="invisible" name="whatever" style="height:0px;width:0px;overflow:hidden;padding:0px;margin:0px;"/>


 
.invisible {height:0px;width:0px;overflow:hidden;padding:0px;margin:0px;}

Open in new window

0
 
gamebitsCommented:
Probably due to the fact that some browser add padding to form elements, add style to your form element

<input type="hidden" name="somename" value="somevalue" style="padding: 0px; margin: 0px">
0
 
nmicheleAuthor Commented:
Hi gamebits,
Thanks for your quick response.
However, I tried this and it doesnt work.
Adding display:none to the style element reduces the space a bit but does not remove it entirely.
I've attached the current code and a file showing the results.
<td colspan="4" style="padding: 0px; margin: 0px">
			<form target="paypal"
   action="https://www.paypal.com/cgi-bin/webscr"
   method="post">
   <input type="image" src="images/merchandise4a_18.jpg" width="105" height="55" 
      border="0" name="submit" alt="Make payments with PayPal - 
      it's fast, free and secure!">
    
    <input type="hidden" name="add" value="1" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="cmd" value="_cart" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="business"
      value="legendaryfashoshot.com" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="item_name"
      value="Dance Legend T-shirt" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="amount" value="25.00" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="no_shipping" value="2" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="no_note" value="1" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="currency_code" value="USD" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="tax" value="0" style="display:none; padding: 0px; margin: 0px">
   <input type="hidden" name="bn" value="IC_Sample" style="display:none; padding: 0px; margin: 0px">
</form>
            
      </td>

Open in new window

q1ie7.jpg
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
gamebitsConnect With a Mentor Commented:
Try to put your input field one after the other (not on a different line)

<input type="hidden" name="cmd" value="_cart" style="display:none; padding: 0px; margin: 0px"><input type="hidden" name="business"  value="legendaryfashoshot.com" style="display:none; padding: 0px; margin: 0px">
0
 
nmicheleAuthor Commented:
Still doesnt work
0
 
nmicheleAuthor Commented:
Hi ncoo,
Thanks for your response. However, I've tried both of your suggestions, but it still doesnt work.
0
 
nmicheleAuthor Commented:
I added the style element described above to the form tag as well. The space was eliminated! Thanks guys.
0
All Courses

From novice to tech pro — start learning today.