Style tips needed for HTML form.

This looks OK in fireFox, but there are border spaces in IE.

Also, any general tips to make it look better are appreciated. Regarding the stye, it should have neutral colors and style that looks okay on most websites, because it's going to be shared among several websites. I'm a CSS newb and a newb at froms too.

I am probably having difficulties with old HTML-style methods and new CSS-style methods. I couldn't get the boxes to line up, so I added another cell for the dollar signs. But then I got a space in IE that looks really bad. Again, this is supposed to be part of copy/paste script that others can use on their websites; other websites are going to have their own diverse CSS files so maybe this should override their CSS with inline CSS if that makes any sense.

<FORM>
<small>
<table style="border-spacing:0px" >
	<tr bgcolor="#cccccc"><td nowrap>blah blah blah blah:</td><td>$</td><td><INPUT NAME="c" VALUE="107" MAXLENGTH="15" SIZE=2></td></tr>
	<tr><td nowrap>blah blah blah blah blah</b>: </td><td>$</td><td nowrap><INPUT NAME="as" VALUE="29" MAXLENGTH="15" SIZE=2></td></tr>
	<tr bgcolor="#cccccc"><td nowrap>blah blah blah blah:</td><td></td><td nowrap><INPUT NAME="nb" VALUE="2" MAXLENGTH="15" SIZE=1>%</td></tr>	
	<tr><td nowrap>blah blah blah blah: </td><td></td><td><INPUT NAME="n" VALUE="8" MAXLENGTH="15" SIZE=2></td></tr>
	<tr bgcolor="#cccccc"><td nowrap>blah blah blah blah: </td><td>$</td><td nowrap><INPUT NAME="iv" VALUE="50" MAXLENGTH="10" SIZE=2></td></tr>	
	 <tr bgcolor="#66CC66"><td colspan="3"><center><INPUT NAME="calc" VALUE="Calculate Return on Investment" TYPE=BUTTON onClick=yieldCalc(this.form)></center></td></tr>
	<tr ><td nowrap>blah blah blah blah:: </td><td>$</td><td nowrap><INPUT NAME="total" READONLY SIZE=2></td></tr>
	<tr bgcolor="#cccccc"><td nowrap>blah blah blah blah:: </td><td></td><td nowrap><INPUT NAME="yield" READONLY SIZE=1>%</td></tr>
</table>
</small>
</FORM>

Code (markup):

Thanks in advance,
RogerDodger

 

CSS is hard to do when the HTML isn't right.

if that were a program, it should throw an exception, sit there with its arms crossed and do nothing. For instance, you're trying to make a <small> hold a <table>. That's like trying to make water hold a bucket.

You don't even need a table to style a form, however if this is going to other pages the question becomes, does this have to be one file or can you have an HTML file and a CSS file like most widgets do? Because it's nasty having the styles IN the form.

You need to read the specs and learn what is required and not allowed in forms!

[b] <form action="something" method="something"> action is required.  Method, if not listed, is GET[/b]
[b]<fieldset>  forms are required to have a block as its first, direct child.  This could be a div or something, but your form is large enough to use a fieldset[/b]
[b]<legend>WHAT THIS FORM DOES</legend>[/b]
[b]<label for="theidoftheinput">[/b]blah blah blah blah: $[b]</label>[/b]
<INPUT [b]id="someniceID"[/b] NAME="c" VALUE="107" MAXLENGTH="15" SIZE=[b]"2"[/b]> [b]always quote your values[/b]
[b]<label for="theidoftheinput">[/b]blah blah blah blah blah: $[b]</label>[/b]
 <INPUT [b]id="someNEWniceID"[/b] NAME="as" VALUE="29" MAXLENGTH="15" SIZE=[b]"2"[/b]>
[b]<label for="theidoftheinput">[/b]blah blah blah blah blah: $[b]</label>[/b] 
<INPUT [b]id="someOTHERniceID"[/b] NAME="nb" VALUE="2" MAXLENGTH="15" SIZE=[b]"1"[/b]>	
[b]<label for="theidoftheinput">[/b]blah blah blah blah blah:[b]</label>[/b]
<INPUT [b]id="yetAnotherID"[/b] NAME="n" VALUE="8" MAXLENGTH="15" SIZE=[b]"2"[/b]>
[b]<label for="theidoftheinput">[/b]blah blah blah blah blah: $[b]</label>[/b]
<INPUT [b]id="andAnotherID"[/b] NAME="iv" VALUE="50" MAXLENGTH="10" SIZE=[b]"2"[/b]>
<INPUT NAME="calc" VALUE="Calculate Return on Investment" TYPE=BUTTON onClick=yieldCalc(this.form)>
[b]<label for="theidoftheinput">[/b]Result: $[b]</label>[/b]
<INPUT id="someUniqueID"[/b] NAME="total" READONLY SIZE=[b]"2"[/b]>
[b]<label for="theidoftheinput">[/b]Result: $[b]</label>[/b]
<INPUT id="someOtherUniqueID"[/b] NAME="yield" READONLY SIZE=[b]"1"[/b]>
[b]</fieldset>[/b]
</FORM>

Code (markup):

Going all lower case is also nicer, but uppercase is not illegal for HTML4.

The input type=button should really be the final button, a submit, and the rest should be something else, not inputs and labels. You can wrap your whole form in a box (a div likely) and then they will all be contained together, the questions and the answers. I usually code answers in a definition list.

<dl>
<dt>Result:</dt>
<dd>blah blah</dd>
<dt>Total widgets:</dt>
<dd>31</dd>
</dl>

 

paddings are always differs in ie and ff

 

Thanks for taking the time Stomme_poes. I am studying that right now. I know my code was a mess(!) and that style is generally better in the CSS. I will change my code for my personal pages, but I have a 2nd dilemma that was in back of my mind. I made this calculator to share with others by putting it on their their web pages in exchange for a link. So, that's why I was thinking of including *in-line style.

In afterthought, I might make two calculators, one with in-line style and one with id attributes that people can style to match their own page. People can then choose which they prefer. A calculator that matches their site, or a simple copy and paste job. Thanks again for your help. Rep added.

 

Well, I wondered if the inline styles were so people just grabbed one file. The problem then might be any CSS styles that person has in their stylesheet for tables, for instance. A table might be an easier-to-style form for something that has to live on its own and go from page to page. Otherwise I never put tables in forms (unless it's a tabled form : )

I think if you are allowed to have a separate css file (and if you give your form an id and refer to the id in the CSS) you have more chance of your form looking the way you intend when it sits on other peope's pages.

So something like

<form action="the action" method="POST" id="formCalculate">

or something.

If you decide it's just easier to use a table in the form, do it like this:

(pseudocode, shortened tags!)
<div> a wrapper to hold both form and the answers
<form tag>
<table> (a direct child, tables are blocks and so can be direct children of forms fine)
<tr>
<th>you could put the legend in here I suppose, won't be read out in screen readers tho</th>
</tr>

<tr>
<td scope="row">
<label for="the input's id">first label:</label>
</td>
<td><input blah blah...>
</td>
</tr>
... repeat...
</table>
</form>
<dl>
<dt>result:</dt>
<dd>(results here)</dd>
...
</dl>
</div>

something like that. the labels still need to be in there (and you can do inline styling of the labels like style="whitespace: nowrap;" or whatever) and the inputs need the id's. The scope="row" helps tell some users that the first td in a row is a sort of "name" or "header" for the rest of the row's td's.