PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Creating forms with tables breaks in IE

  1. I used html in my form to make it appear as a table and it works fine in FF, Chrome, etc but breaks in IE 7. IE 8 is fine. The url is http://www.vinotours.co/careers. It also breaks the forms in /contact. Any thoughts on why this is? My inputs all go to new lines instead of floating left, and there are a variety of css issues. I did some overrides in my style.css so my guess is these are what is causing it, but I can't believe it would break this easily. Thanks in advance for any help / suggestions you can give me.

    Posted 12 years ago on Tuesday August 2, 2011 | Permalink
  2. Your markup is wrong. You're mixing tables and list elements and that's making the browser angry. The others are apparently being more forgiving for the bad markup. You can see several of the improperly opened/closed list items inside the table < td > elements

    [html]
    <tr>
    	<td colspan="5">
    
    <!-- oops.. pieces of a list just floating around in here.. oh the humanity.. -->
    
    	</li>
    	<li id='field_1_30' class='gfield' >
    		<label class='gfield_label' for='input_1_30'>Other</label>
    		<div class='ginput_container'>
    			<input name='input_30' id='input_1_30' type='text' value='' class='medium'    />
    		</div>
    	</li>
    	<li id='field_1_31' class='gfield    tabler' >
    		<label class='gfield_label' for='input_1_31'>Untitled</label>
    		<div class='ginput_container'>
    			<input name='input_31' id='input_1_31' type='text' value='' class='medium'    />
    		</div>
    	</li>
    	<li id='field_1_32' class='gfield    tabler' >
    		<label class='gfield_label' for='input_1_32'>Untitled</label>
    		<div class='ginput_container'><input name='input_32' id='input_1_32' type='text' value='' class='small'    /></div>
    	</li>
    	<li id='field_1_33' class='gfield    tabler' >
    		<label class='gfield_label' for='input_1_33'>Untitled</label>
    		<div class='ginput_container'>
    			<input name='input_33' id='input_1_33' type='text' value='' class='small'    />
    		</div>
    	</li>
    	<li id='field_1_29' class='gfield      gfield_html gfield_html_formatted gfield_no_follows_desc' >
    
    <!-- list is still open, but now we jump back to a table element -->
    
    	</td>
    </tr>

    If you're going to introduce new HTML markup into the form, you need to make sure it's properly formatted so it renders correctly in all of the browsers.

    If you're having problems with the markup/HTML fields, you have to remember that the main form is structured using an unordered list. If you want to interrupt that flow to add table markup, you need to first close the list, then add your markup and re-open the list manually so the form continuity is preserved. That sounds difficult, but it's not really. Here's an example using div's as the containers instead of tables. The concept is the same though.

    http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425

    Posted 12 years ago on Tuesday August 2, 2011 | Permalink
  3. Ahhh, I see. Thanks for pushing me in the right direction.

    Posted 12 years ago on Thursday August 4, 2011 | Permalink
  4. Sure. No worries. You had the right idea, you just have to consider the existing form markup and how your new markup will work in conjunction with it. It takes a tad more planning, but when done right you can do some pretty neat stuff.

    Posted 12 years ago on Thursday August 4, 2011 | Permalink

This topic has been resolved and has been closed to new replies.