Page 1 of 1

Help, form ruins layout.. WHY??

Posted: Sun Jan 04, 2009 2:44 am
by 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

Code: Select all

<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?

Re: Help, form ruins layout.. WHY??

Posted: Sun Jan 04, 2009 2:59 am
by camarosource

Code: Select all

<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>

Re: Help, form ruins layout.. WHY??

Posted: Mon Jan 05, 2009 3:17 pm
by Schneider707
do you have a live example we could see? I bet a little css would fix that right up.

If you can't put a live example up, then add this to a css file anywhere.

Code: Select all

form{padding-top:0px;}

Re: Help, form ruins layout.. WHY??

Posted: Mon Jan 05, 2009 4:22 pm
by Syntac
Try adding a closing tag...

Re: Help, form ruins layout.. WHY??

Posted: Mon Jan 05, 2009 4:39 pm
by pickle
Forms might also have some margins. I usually do this for my forms:

Code: Select all

form{
   margin:0;
   padding:0;
}