|
|
Posted by Adrienne Boswell on 07/06/07 21:55
Gazing into my crystal ball I observed Tim Streater
<timstreater@waitrose.com> writing in news:timstreater-
E9D5D5.22344806072007@individual.net:
> I post an example here which is giving me ulcers. I've cut it down to
> the minimum possible to illustrate the problem.
A URL would be much better, but...
>
> There are two tables. In the first, the rows with the buttons render
> with extra space at the bottom of the cell, below the text area and the
> button. Why is this space there and how do I get rid of it? I sort of
> succeed in this with the second table, but I have to delete the </form>
s
> to achieve it.
Form is a block element. If you want to use a table with form you have
to put the form element outside the table element.
>
> Under OS X, Safari and Firefox give me the extra space in every row of
> the first table, Safari gives none in the second while Firefox only
> gives none for buttons 5 and 6. IE renders both tables identically.
>
> Under XP I only tried Firefox and it appears to behave the same as on
> the Mac.
Again, a URL would be helpful.
>
> I cut down the style sheet referred to and it now contains just:
>
> .mtext {FONT: 11px verdana,tahoma,arial; color: #000000;}
You know, don't you that IE can't resize pixels, and are you sure that
11px is going to be large enough for me to see?
>
> Any clue about how to remove the unwanted space appreciated. If there
> are better ways of doing this I can store that up and try to apply it
> later.
>
Yes, get rid of the tables and use the right tool for the job - label
elments and CSS.
>
>====== start of html =====
>
><html>
No DocType?
><head>
><link REL=stylesheet HREF=my-style.css TYPE=text/css>
No title element? How am I supposed to know where I am?
></head>
><body>
><table border=1 class=mtext>
> <tr>
> <td>some text</td>
> </tr>
> <tr>
> <td><form>
What is the action of the form? What is the method of the form?
<input type=text size=20>
What is the name of this input element. Form contents are sent in
name/value pairs.
<input type=button
> value='1'>
Seems this might need some client side script to work. See
http://www.w3.org/TR/html401/interact/forms.html#push-button .
</form></td>
> </tr>
> <tr>
> <td><form><input type=text size=20><input type=button
> value='2'></form></td>
> </tr>
> <tr>
> <td><form><input type=text size=20><input type=button
> value='3'></form></td>
> </tr>
></table>
>
><p><p>
What's this? Two empty paragraphs? Why? If you need spacing put it in
the bottom margin of the preceding element.
>
><table border=1 class=mtext>
> <tr>
> <td>some text</td>
> </tr>
> <tr>
> <td><form><input type=text size=20><input type=button value='4'>
</td>
> </tr>
> <tr>
> <td><form><input type=text size=20><input type=button value='5'>
</td>
> </tr>
> <tr>
> <td><form><input type=text size=20><input type=button value='6'>
</td>
> </tr>
></table>
></body>
></html>
>
So, now my question becomes - what the heck are you trying to do here?
None of these forms have actions or methods. No names for the input
elements, so no way to send name/value pairs.
If you want to have a nice looking form that lines up the elements, use
labels and CSS. An example is here:
http://intraproducts.com/usenet/requiredform.asp . This can be easily
ported to PHP, or any other server side language, and the HTML/CSS are
all there to see.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
[Back to original message]
|