Forum Moderators: open

Message Too Old, No Replies

HTML form problem.

         

krugi

4:47 pm on Sep 13, 2009 (gmt 0)

10+ Year Member



Hello everybody.

Just for mention, I'm programming at Dreamweaver

I'm programming a HTML website for a client,
and I'm at the time i need to create the contact form.
Except from the one-line areas (input text) i have multi-area (Textarea).
When I'm putting the textarea inside my form, it's looks OK.
When I'm checking it on a browser (And i tested it on Safari, Firefox and Opera),
It looks horrible! it's too big and getting over things...
It makes the site look like #*$!.
Maybe the fact I'm using "RTL" div it's influencing on the textare?
-The Docotype is HTML 4.01 Transitional

I'm sorry about the poor English.
I'm just a young boy from Israel (:

D_Blackwell

5:24 pm on Sep 13, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can you pull out just the HTML/CSS that shows the contact form and the presentation issues? Post it (test ready), and then we can all see the specific problems and what the options are for smoothing out the rendering in live testing.

Include the complete DTD that you are using.

Don't use Dreamweaver, so can't speak to "RTL". Someone else will though. (A quick search suggests 'right to left', so I would not think so.

krugi

5:39 pm on Sep 13, 2009 (gmt 0)

10+ Year Member



I don't have CSS file for this form.
The form is inside a <div> tag with CSS.
So here is the HTML code:

<form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><label for="Name">Name:</label></td>
<td><input type="text" name="Name" id="Name"></td>
</tr>
<tr>
<td><label for="Email">Email:</label></td>
<td><input type="text" name="Email" id="Email"></td>
</tr>
<tr>
<td><label for="Phone">Phone:</label></td>
<td><input type="text" name="Phone" id="Phone"></td>
</tr>
<tr>
<td><label for="Content">Message:</label></td>
<td><textarea name="Content" id="Content" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Areas with (*) are required!</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>

And i didn't understood why shouldn't use Dreamweaver...

D_Blackwell

6:00 pm on Sep 13, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry for the confusion. I meant that I don't use Dreamweaver; thus couldn't specifically address the 'RTL' reference if that was a Dreamweaver doodad. Though it is not for me I am not in any way telling you not to use Dreamweaver software.

(Actually have a current version here, included as part of my Abobe Suite. Just not an app that I use.)

krugi

6:16 pm on Sep 13, 2009 (gmt 0)

10+ Year Member



Oh, Okay.

By the way- I found out the problem! (:
I didn't defined DTD.
I thought that when I'm defining it at one page of the site,
It's changing it in the other pages.

So... thanks for trying to help (:

D_Blackwell

6:26 pm on Sep 13, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It looks horrible! it's too big and getting over things...
It makes the site look like #*$!.

By itself, the form (though plain as provided) looks fine in Firefox, Opera, and IE. So - the problem would seem to be with containers that are not behaving as you think they ought. I would continue to work the problem by adding background-color: to that and surrounding containers and see if they are sized and/or positioned as you think. Seeing what is in the container is not necessarily the same as knowing what space the container is actually claiming.

As far as .....it's too big' I would be suspicious of nested <div>, and the CSS. If you have a <div> with a font-size: 1.1em, and then put a <div> with a font-size: 1.4em; inside that, and so forth - nasty things can happen.

<edit>
You posted 'problem fixed' while I was making this post, so nevermind the above. Glad you got it worked out.

Take the lesson that the DTD is very important. When asking a question and posting a sample, include the full DTD. Most people don't, and that is a mistake. If a DTD is not provided, I am going to plug in the DTD of my choice to test the problem.
</edit>

krugi

7:09 pm on Sep 13, 2009 (gmt 0)

10+ Year Member



Thanks (:

StoutFiles

6:07 am on Sep 14, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



We read left to right over here, so flip that smile around. :)

blackheartnaz

8:44 am on Oct 1, 2009 (gmt 0)

10+ Year Member



hi guys.

i'm going nuts over this problem. i thought i would write it down as "simple problem", but is obviously ISN'T in my case. arrghh! :(

could somebody help me with this please?
the problem is it doesn't show right in IE6. the textbox for User ID is LONGER than that with password, though I have set size="18"!

what am I doing wrong?

i have this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<TABLE width=255 align=CENTER CELLSPACING=0 CELLPADDING=0 id=infobox BORDER=0>
<form name=logInForm method=POST action=authurs.php>
<tr id=tblHdrLg height=25 class=xl1r1yt1b1><td colspan=2 align=center>Please LOGIN</td></tr>
<tr><td colspan=2 align=center>&nbsp;</td></tr>

<TR>
<TD valign=center width=100 class=leftNavLbl align=right>User ID</TD>
<TD valign=center width=155><INPUT type="TEXT" name="usrId" value="" maxlength="20" size="18"></TD>
</TR>

<TR>
<TD valign=center width=100 class=leftNavLbl align=right>Password</TD>
<TD valign=center width=155><INPUT type="PASSWORD" name="gpas" value="" maxlength="20" size="18"></TD>
</TR>

<tr><td colspan=2 align=center>&nbsp;</td></tr>

<TR>
<TD VALIGN="top">&nbsp;</TD>
<TD ALIGN="CENTER">
<INPUT TYPE="submit" name="submit" STYLE="width: .605in; height: 0.275in" VALUE="Log In" CLASS="button">&nbsp;
<INPUT TYPE="reset" name="reset" STYLE="width: .605in; height: 0.275in" VALUE="Reset" CLASS="button"><br><br>
<input type=hidden id=TRUE name=logd1 value=usrLogdIn>
</TD>
</TR>
</form>

WHAT DID I DO WRONG? :(

rocknbil

8:56 pm on Oct 1, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The size attribute is size as determined by monospaced characters, I.E., courier or other system defaults (someone please correct me if I'm wrong.) Hence it will always be a slippery task attempting to align form elements by the size attribute alone.

Apply CSS styles to your form elements to get them to line up correctly:

.med-text {
width: 200px;
/* or 6em, or other valid sizes */
}

<input type="text" class="med-text" name="u" id="u">

<input type="password" class="med-text" name="p" id="p">

blackheartnaz

1:39 am on Oct 26, 2009 (gmt 0)

10+ Year Member



thank you very much rocknbil :)