The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Form styling problem in Firefox
Brian Chandler
post 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???



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:59 AM