Gaps between controls

11-07-2006

Is there any way to eliminate the gaps between adjacent html controls?
I want a text entry box with an adjacent label with no gap between
them. I have tried setting borders, margins and padding to 0, and using
forms, tables and divs but I still get about a 2 pixel gap between the
controls.

http://www.geocities.com/dimstthomas/index.htm

<html>
<head>
</head>
<body style="border:0;padding:0;margin:0;background:yell ow">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background

ink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:ligh tblue">
<BR>
<form style="border:0;padding:0;margin:0;background:gree n">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background

ink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:ligh tblue">
</form>
<table style="border:0;padding:0;margin:0;background:red" >
<tr>
<form style="border:0;padding :0;margin:0;background:green">
<td>
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background

ink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:ligh tblue">
</td>
</form>
</tr>
</table>
<div style="border:0;padding :0;margin:0;background:green">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background

ink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:ligh tblue">
</div>
</body>
</html>

11-07-2006

wrote:
> Is there any way to eliminate the gaps between adjacent html controls?
> I want a text entry box with an adjacent label with no gap between
> them. I have tried setting borders, margins and padding to 0, and using
> forms, tables and divs but I still get about a 2 pixel gap between the
> controls.
>

Firstly, I know your just testing but us have such invalid markup that
your results will not be valid

<snip>

> <table style="border:0;padding:0;margin:0;background:red" >
> <tr>
> <form style="border:0;padding :0;margin:0;background:green">
{You cannot put a FORM in a TABLE between the TR and TD elements like here }

> <td>
> <input value="3.5"
> style="border:0;padding:0;margin:0;text-align:right;background

ink">
....

<form action="someDestination.cgi" method="post">

<table>
<tr><td><input type="text"...

<snip>

> <input value="3.5"
> style="border:0;padding:0;margin:0;text-align:right;background

ink">
> <input readonly=true value="cm"

Even in a test your should give your document a DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And using stylesheet or at least a STYLE element can consolidate your
rules and make your testing markup more legible, e.g.

<style type="text/css">
BODY, TABLE, DIV { margin: 0; padding: 0; border: 0; }
TABLE { border-collapse: collapse; }
BODY { background-color: #FF0; }
..test1 { background-color: #F00; }
..test2 { background-color: #0F0; }

....

</style>

Now to answer your question, INPUTs are inline elements and the
whitespace between them is supposed to be ignored is not always by
browsers. Just remove the whitespace between INPUT elements in your markup

<input type="text" value="3.5" class="dimension"><input type="text"
value="cm" class="units" readonly>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Why gaps in my meny in IE?	greg	HTML	4	01-29-2006 02:19 AM
Eliminate gaps between table cells...	cool2005	Javascript	5	05-20-2005 10:19 PM
XSLT White Space Gaps Under Images	Mark247	XML	1	09-02-2004 11:47 PM
log parsing: gaps between transactions	Arthur Dent	Perl	1	12-03-2003 12:20 AM
Writing audio cd's without gaps???	Rob Mitchell	Computer Support	2	06-30-2003 11:39 PM