Help, form ruins layout.. WHY??

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
camarosource
Forum Commoner
Posts: 77
Joined: Sat Aug 03, 2002 10:43 pm

Help, form ruins layout.. WHY??

Post 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?
camarosource
Forum Commoner
Posts: 77
Joined: Sat Aug 03, 2002 10:43 pm

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

Post 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>
Schneider707
Forum Newbie
Posts: 9
Joined: Mon Dec 29, 2008 10:53 am

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

Post 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;}
User avatar
Syntac
Forum Contributor
Posts: 327
Joined: Sun Sep 14, 2008 7:59 pm

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

Post by Syntac »

Try adding a closing tag...
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post by pickle »

Forms might also have some margins. I usually do this for my forms:

Code: Select all

form{
   margin:0;
   padding:0;
}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply