[RESOLVED] Help, form ruins layout.. WHY??

camarosource

How to stop forms from ruining page layout??

I am writing a website with a form in the webpage. The layout it fit snuggly with the fields looking PERFECT in frontpage Design mode (WYSIWYG). However when I view the page any browser, the form has suddenly destroyed the page layout cause it's mysteriously added like 2 or 3 lines in height.

Experimenting, if I just have the fields it's perfect. However add the line

 <form action="http://www.camarosource.ca/forums/ucp.php?mode=login" method="post">

And it ruins the layout.

How do I make it so the form isn't creating that extra height?

camarosource

<html>
<head>
</head>
<body>
		<table border="0" cellspacing="0" cellpadding="0" bordercolor="#FFFF00">
			<tr>
				<td valign="top" rowspan="3">
			<img src="/images/layout_22.jpg" width="255" height="79" alt="" border="0"></td>
				<td valign="top">
				<img src="/images/layout_23.jpg" width="468" height="9" alt=""></td>
				<td rowspan="3">
			<img src="/images/layout_24.jpg" width="139" height="79" alt=""></td>
				<td rowspan="3">
			<table border="0" width="100%" cellspacing="0" cellpadding="0" bordercolor="#0000FF">
				<tr>
					<td colspan="2">
			<img border="0" src="/images/layout_25.jpg" width="141" height="16"></td>
				</tr>
				<tr>
					<td background="/images/search_bkg.jpg">
<form action="http://www.camarosource.ca/forums/ucp.php?mode=login" method="post">
                                                <input type="text" name="username" size="15" value="" tabindex="1"><br>
                                                <input type="password" name="password" size="15" tabindex="2"></td>
					<td>
			<img border="0" src="/images/layout_28.jpg" width="25" height="48"></td>
				</tr>
				<tr>
					<td colspan="2">
					<table border="0" width="141" cellspacing="0" cellpadding="0" bordercolor="#00FF00">
						<tr>
							<td width="25">
			<input type="image" name="login" src="/images/layout_30.jpg"></td>
							<td width="110">
			<img border="0" src="/images/layout_31.jpg" width="69" height="15"></td>
						</tr>
					</table>
					</form>
					</td>
				</tr>
			</table>
				</td>
			</tr>
			<tr>
				<td valign="top">
			<img src="/images/layout_26.jpg" width="468" height="59" alt=""></td>
				</tr>
			<tr>
				<td valign="top">
			<img src="/images/layout_32.jpg" width="468" height="11" alt=""></td>
				</tr>
			</table>
</body>
</html>

NogDog

Possibly this will help:

<form action="http://www.camarosource.ca/forums/ucp.php?mode=login" method="post" [color=red][b]style="margin:0"[/b][/color]>

Not that I trust any Frontpage-generated layout to be truly cross-browser compatible and robust, mind you. (Looks like some image slicing-and-dicing going on there? What happens if you increase the minimum font-size in your browser settings: does that break the layout, too?)

camarosource

NogDog;10898199 wrote:
Possibly this will help:
<form action="http://www.camarosource.ca/forums/ucp.php?mode=login" method="post" [color=red][b]style="margin:0"[/b][/color]>
Not that I trust any Frontpage-generated layout to be truly cross-browser compatible and robust, mind you. (Looks like some image slicing-and-dicing going on there? What happens if you increase the minimum font-size in your browser settings: does that break the layout, too?)

style="margin:0"

BINGO! that was it! Thanks!!