View Full Version : HTML Web Form not working in FF 3.6.3 with CSS

06-16-2010, 11:07 AM
I have an issue with a web form not behaving properly (cannot mouse click into any of the inputs - only tab into them) when it is enclosed by containing divs that have a CSS width assigned to them. This inappropriate behavior occurs when browsing the form in FireFox 3.6.3 or Safari 4.0.5, but works fine in IE8 and Opera10.10.

A sample of the form can be found here: http://www.karajacobsonphotography.com/test-form2.php

The associated CSS files are: http://www.karajacobsonphotography.com/css/kjacobson.css and http://www.karajacobsonphotography.com/css/kjmain.css

A HTML code snippet from the body tag:

<div id="page" style="min-height:975px;">
<div id="container">
<div id="main">
<h1 id="logo">

And the form HTML code:

<form method="post" action="/packages/purchase-photos.php" name="confirmorder" id="confirmorder">
<div style="width:1000px; margin:0 25px;">
<div style="display:block; position:relative; float:left; width:550px;">
<table width="550" style="margin:0; text-align:left;" align="left">
<td width="125" align="right"><input id="category" type="hidden" name="category" value="Bluebirds" size="25" /></td>
<td width="425" align="left"></td>
<td width="125" align="right"><input id="name" type="text" name="name" value="" size="25" /></td>
<td width="425" align="left"><label for="name"><strong>Your Name</strong></label><br /></td>
<td width="125" align="right"><input id="frmEmailAddress" type="text" name="frmEmailAddress" value="" size="25" /></td>
<td width="425" align="left"><label for="frmEmailAddress"><strong>Type your PayPal email</strong></label><br /></td>
<br />

<h3 style="margin:25px 0;">Photograph: [BluebirdsSlideshow9.jpg] - from Bluebirds category</h3>
<h3>Print Media</h3>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printA" value="order" />&nbsp; (1) 4x6 and (6) 2 x 3 = $8.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printB" value="order" />&nbsp; (1) 5x7 and (4) 2.5 x 3.5 = $8.00</li>

<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printC" value="order" />&nbsp; (2) 5x7 = $8.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printD" value="order" />&nbsp; (1) 8 x 10 = $8.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printE" value="order" />&nbsp; (1) wallets on a 8x10 = $8.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="printF" value="order" />&nbsp; (1) 11 x 14 = $15.00</li>

<h3>Digital Media</h3>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="digitalA" value="order" />&nbsp; (1-25) images = $20.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="digitalB" value="order" />&nbsp; (26-50) images = $35.00</li>
<li style="list-style:upper-alpha; padding:5px 0;"><input type="checkbox" name="digitalC" value="order" />&nbsp; (51-100) images = $60.00</li>

<div style="min-height:500px; width:400px; display:block; position:relative; float:left;"><img src="http://www.karajacobsonphotography.com/images/Bluebirds/slideshows/BluebirdsSlideshow9.jpg" alt="Photo Sample: BluebirdsSlideshow9.jpg" style="margin:0px 20px 0px 20px; width:200px; padding-right:20px;" width="200" title="Photo Sample: BluebirdsSlideshow9.jpg" /><p align="center" style="width:220px;">BluebirdsSlideshow9.jpg</p></div>
<div style="width:600; position:relative; display:block; text-align:center;"><input type="hidden" name="img_namess" value="BluebirdsSlideshow9.jpg" /><input type="submit" name="submit" value="Place Order" /></div></form>

I would appreciate any help in sorting out this issue. Thank you.

06-16-2010, 12:13 PM
Not sure why, but removing position:relative; from the following would cure it.

<div style="width:600; position:relative; display:block; text-align:center;"><input type="hidden" name="img_namess" value="BluebirdsSlideshow9.jpg" />

PS: 1) Don't use tables for making layout (http://www.hotdesign.com/seybold/).
2) Don't use too much inline CSS (http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/).

06-16-2010, 12:26 PM
Yes, I've just been looking at this as well.

I think it's the floated divs within the first div within your form. An alternate fix is to apply overflow:auto to the first div (the one with width:1000px). IE presumably doesn't have an issue because the element hasLayout via the width.

06-16-2010, 01:13 PM
Thank you abduraooft and SB65. Removing the "position:relative" in the second to last input fixed the issue! I also tried "overflow:auto;" in the page#div and put back the "position:relative", but the form still behaved inappropriately. Another odd behavior, when the position:relative was still applied, is that the form behaved as a collective element (like an image). If you tried to highlight with the mouse a piece of text in the form, the whole form would be highlighted instead....somehow the position relative when under the constraint of a div width would effect the form and mouse interactions.....still don't understand why....

I also agree with limiting inline CSS....I usually use it when developing a site and end up putting all the CSS in a separate file for final production. Tables I use sparingly, usually just for "tables", but you caught me applying it to this form.....If I have time I'll convert that to floating div blocks instead.

Thanks again for your responses and Help!!!