SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Burnaby, BC
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help, form ruins layout.. WHY??

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

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    showing HTML code will help to understand the problem

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Burnaby, BC
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cont911 View Post
    showing HTML code will help to understand the problem
    HTML Code:
    <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>

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Burnaby, BC
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed! "
    style="margin:0"

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use a doctype such as HTML 4 strict:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    and reset margins using
    Code:
    *{ margin:0; padding:0; }
    To ensure the user agent renders your markup as a modern page ( non quirks mode ) and all default browser styles are purged ( most, though there will still be inconsistencies ).
    Cross browser css bugs

    Dan Schulz you will be missed

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SoulScratch

    * { margin: 0; padding: 0 } is not the best idea.

    This will affect form fields between the different browsers.

    If you know you will be dealing with newer browsers, then I would use something like this:

    Code CSS:
    blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,li,ul,ol,p,pre,textarea,table,td,th {
    	margin: 0;
    	padding: 0
    }

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    @SoulScratch

    * { margin: 0; padding: 0 } is a not the best idea.

    This will effect form fields between the different browsers.

    If you know you will be dealing with newer browsers, then I would use something like this:

    Code CSS:
    blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,li,ul,ol,p,pre,textarea,table,td,th {
    	margin: 0;
    	padding: 0
    }
    If I wanted to use a reset.css I would use the one Dan provided, but 95&#37; of the time these little form 1-3 pixel inconsistencies do not matter. I remember when I used to be anal about it and relied upon a reset.css, but I ended up being too lazy to re-use it.

    It's also a wasted HTTP request if it's a standalone file.

    Sometimes you have to review and apply based on the current code. Looking at the table based code provided in the prior post it seems like the person isn't that familiar with CSS, a simple uni reset would do the job because its concise, quick and short while that whole glob of a selector may be confusing and would be a little frustrating to copy and paste around unless he has a built-in function in his editor which throws it in ( such as one you could program in vim ) or a reset.css he can copy around.
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a replacement for the universal selector's margin/padding reset.

    This is getting someone off on the better foot, I like to think

    I think most people would agree, this is a smarter solution...

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either of the solutions are fine, but I don't see a valid reason to use the larger of the two save for a few pixels in the padding of a form control no one will care to notice - could you provide a screenshot so I can see the difference?

    Hm - it does seem like it's more than a few pixels, that is if you're not using a framework with default widths being applied to the input elements, that or using <input type=image> or some custom script that enhances the buttons

    I must've initially tested this months ago using a framework, I can see a little bit more of a difference now:

    Code:
    <!doctype html>
        <head>
    	<style>
    	    form#first * { margin:0; padding:0; }
    	    form#first { margin:0 0 1em; }
    	    form#second { }
    	    input { display:block; }
    	</style>
        </head>
    <body>
        <form id=first>
    	<button>test</button>
    	<input type=text value=huh>
    	<input type=submit value=go>
        </form>
        <form id=second>
    	<button>test</button>
    	<input type=text value=huh>
    	<input type=submit value=go>
        </form>
    </body>
    So yeah, I guess I might go back to the reset again if I'm dealing with layouts that are relying upon native form control styling and spacing instead of what I'm usually used to - which is pretty much highly graphicalized customized buttons and such.
    Cross browser css bugs

    Dan Schulz you will be missed

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eric Meyer has written some articles on this topic.

    http://meyerweb.com/eric/thoughts/20...mal-weirdness/

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Opera was soooo terrible with the dropdown selects and options that I needed to go to the version Cooper linked to.

    Since margins are never the problem, they get to stay. Since I haven't found any default padding on inline elements, I ignore them.

    * {
    margin: 0;
    }
    html, body, div, p , ul, li, form, fieldset, any other blocks used on that site only {
    padding: 0;
    }

    It's a single long line, so no extra GET requests (I agree about reset.css, and strongly dislike them), it merely looks stupid : ) I would never touch Eric's reset with a 10-foot-pole. It's ugly, something he made for his own personal use.

    Works like a charm, forms are ok. I just wish when people first started whispering about the universal reset being an issue that they'd said WHAT IT WAS as this bothered me to no end, worrying what the reset might be doing to my forms and not seeing it. I had to just sit down with a fake form and test test test to see what I could get away with and not. So now I tell people... and maybe it's a good idea to make a screenshot in FF and Opera so folks can see the problems (which only show up sometimes).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •