Form styling problem in Firefox |
Form styling problem in Firefox |
Brian Chandler |
Sep 28 2006, 10:12 AM
Post
#1
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Sorry, I can't directly point to the page, because it's locked. Here's a fragment of one of my admin pages - it's a form that submits the details for faxing an order to our supplier:
<h3>Print fax to NAME</h3> <form class=framed method=post action="purchpr.php?ocode=51"> <p>Date: <input type=text size=4 name=yyyy value=2006>年 <input type=text size=2 name=mm value=09>月 <input type=text size=2 name=dd value=28>日 <p>To:<br><textarea name=address cols=20 rows=4 class=jinput>Dear Supplier (FAX: 03 9999 9999)</textarea><p>追加文:<br><textarea name=tuikabun cols=40 rows=4 class=jinput></textarea><p><input type=submit value='Print fax'></form> Here's the style for this form class: FORM.framed { margin: 0 10%; border: 1px solid #000000; background-color: #f0e0e0; padding: 10px; } OK, so in Opera we get what we expect - a border around the form, with a nice pink background. But in Firefox the box (border background and all) just carries on, enclosing the rest of the page content. Is there any reason Firefox should fail to recognise the </form> as ending the form format? If I stick an extra <div> around it, then Firefox suddenly notices and behaves properly. Here's the version with the extra <div> bracketing. <h3>Print fax to NAME</h3> <div style="border: thin solid #804000;"> <form class=framed method=post action="purchpr.php?ocode=51"> <p>Date: <input type=text size=4 name=yyyy value=2006>年 <input type=text size=2 name=mm value=09>月 <input type=text size=2 name=dd value=28>日 <p>To:<br><textarea name=address cols=20 rows=4 class=jinput>Dear Supplier (FAX: 03 9999 9999)</textarea><p>追加文:<br><textarea name=tuikabun cols=40 rows=4 class=jinput></textarea><p><input type=submit value='Print fax'></form> </div> My question: is it just safer to use only <div> for boxes? Is this sort of error/bug common? Or am I making a mistake of some subtle nature??? |
Christian J |
Sep 28 2006, 12:19 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
The first example looks fine in all but my oldest Gecko browser (NS6), where the FORM content is rendered outside a low pink box. Closing the P elements seems to help.
|
Lo-Fi Version | Time is now: 28th March 2024 - 05:59 AM |