Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML Web Form not working in FF 3.6.3 with CSS

    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.c.../kjacobson.css and http://www.karajacobsonphotography.com/css/kjmain.css

    A HTML code snippet from the body tag:
    Code:
    <body>
    <div id="page" style="min-height:975px;">
    	<div id="container">
    		<div id="main">
                          <h1 id="logo">
    And the form HTML code:
    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">
    		<tr>
        	<td width="125" align="right"><input id="category" type="hidden" name="category" value="Bluebirds" size="25" /></td>
            <td width="425" align="left"></td>
    		</tr><tr>		
        	<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>
        	</tr><tr>
    		<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>
    		</tr></table>
    		<br />
    
    		<h3>&nbsp;</h3>
    		<h3 style="margin:25px 0;">Photograph: [BluebirdsSlideshow9.jpg] - from Bluebirds category</h3>
    		<h3>Print Media</h3>
            	<ol>
    				<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>
                    </ol>
    
    			<h3>Digital Media</h3>
            	<ol>
    				<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>
    
                    </ol>				
    		</div>
    		<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>
    		<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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Not sure why, but removing position:relative; from the following would cure it.
    Code:
    <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.
    2) Don't use too much inline CSS.
    Last edited by abduraooft; 06-16-2010 at 12:16 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    webpaws (06-16-2010)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • Users who have thanked SB65 for this post:

    webpaws (06-16-2010)

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •