|
|
Posted by Jonathan N. Little on 11/07/06 14:58
dimstthomas@yahoo.com 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:pink">
....
<form action="someDestination.cgi" method="post">
<!--
now you must have a block element's opening tag here
P, TABLE, DIV, or FIELDSET
-->
<table>
<tr><td><input type="text"...
<snip>
> <input value="3.5"
> style="border:0;padding:0;margin:0;text-align:right;background:pink">
> <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
Navigation:
[Reply to this message]
|