• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 141
  • Last Modified:

How to get this all on one horizontal line?

How can I get this to appear on one horizontal line?  and how to make the font for "Enter GUID here" smaller?
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="VHS7P2232ZNYG">
<table>
<tr>
<td><input type="hidden" name="on0" value="GUID">Enter GUID here</td>
<td><input type="text" name="os0" maxlength="100"></td>
<td><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit"</td>
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"></form>
</tr>
</table>

Open in new window

0
rmmarsh
Asked:
rmmarsh
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Few errors on the HTML there:
Input image button doesn't have a tag closing
<td><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit"/></td>

Open in new window


You should place the </form> tag outside the table because you have started it out of the table, placing it within the table breaks the DOM structure.

Pixel image should be placed in a TD or moved to an existing one, you can't have content directly under a TR.

To make the text smaller, you can add the following CSS/style to the parent TD of it.
<td style="font-size: smaller;">

Open in new window



<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="VHS7P2232ZNYG">
<table>
<tr>
<td style="font-size: smaller;"><input type="hidden" name="on0" value="GUID">Enter GUID here</td>
<td><input type="text" name="os0" maxlength="100"></td>
<td><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" /></td>
<td><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
</tr>
</table>
</form>

Open in new window


Also, you can do it without using a table:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="VHS7P2232ZNYG">
<label for="os0" style="font-size: smaller;">Enter GUID here</label>
<input type="text" id="os0" name="os0" maxlength="100" style="margin: 0 10px;" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>

Open in new window

0
 
rmmarshAuthor Commented:
Thank you so much!  The first example worked just like I wanted it to...
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now