Lining up forms

liunx

Guest
I want a form item to line up with text inside a table. For example:<br />
<br />
<table><br />
<tr><br />
<td><br />
Some button<br />
</td><br />
<td><br />
<form><br />
<input type="submit" value="button"><br />
</form><br />
</td><br />
</tr><br />
</table> <br />
<br />
The button is placed about 5 pixels higher than the text and it doesn't look too good. Any way around this? Thanks<!--content-->Hi there entercow,<br />
<br />
Welcome to these forums<br />
You could do it like this...<br />
Place this code between the <head> tags<br />
<style type="text/css"><br />
<!--<br />
td <br />
{<br />
vertical-align:top;<br />
}<br />
//--><br />
</style><br />
<br />
c:cool::cool:thead<!--content-->Well I could do that. But I would rather have a different option. How come submit buttons have blank space under them. I don't want the extra size. I could valign='top' but then there is still a big space under the submit button and it doesn't look right.<!--content-->Hi there entercow,<br />
<br />
Well, if it's precision positioning that you require,<br />
try this...<html><br />
<head><br />
<style type="text/css"><br />
<!--<br />
td{ width:200px; height:200px; border: solid 1px #000000; }<br />
span#text{ position:relative; top:50px; left:120px; } <br />
span#text1{ position:relative; top:50px; left:0px; }<br />
input#button {position:relative; top:70px; left:0px; }<br />
//--><br />
</style><br />
</head><br />
<body><br />
<table> <br />
<tr> <br />
<td> <br />
<span id="text">Some button </span><br />
</td> <br />
<td> <br />
<form> <br />
<input id="button" type="submit" value="button"> <br />
</form> <br />
<span id="text1">some text </span><br />
</td> <br />
</tr> <br />
</table><br />
</body><br />
</html><br />
c:cool::cool:thead<!--content-->it is not the submit button that has the space, it is the form itself as it is a block-level element.<br />
<br />
<form style="display: inline"> <br />
<input id="button" type="submit" value="button"> <br />
</form> <br />
<br />
add the bold and it will take away that space.<!--content-->Thanks for the help guys. That is exactly what I wanted scoutt.<!--content-->
 
Back
Top