9

My form inputs display properly if pixel padding is used, but using a percentage padding for left and right breaks it. I can't figure out why.

It works in Safari, broken in Firefox 3.5.3 OSX.

The problem is that when I use a percentage padding, the padding all breaks (hence why the input value is not aligned nicely.)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>% padding</title>  
        <style>
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
        border:none;

    }

    div.content {
        width:50%;
        margin:0 auto;
        background:#eee;
    }
    div.content form {
        width:100%;
    }
        div.content form ul {
            list-style:none;
            margin:0;
            width:100%;
        }
        div.content form li {
            position:relative;
            margin-bottom:20px;
            height:64px;
            width:100%; /*  width is declared */
        }
        div.content form li label {
            position:absolute;
            width:auto;
            left:0;
            top:0;
            line-height:20px;
        }
        div.content form li .text {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="content">
    <form action="" method="get">
        <ul>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>

        </ul>
    </form>
    </div>
</body>
</form>

2 Answers 2

5

There is an open (at time of writing) bug on this here:

https://bugzilla.mozilla.org/show_bug.cgi?id=527459

UPDATE: The bug is finally fixed! 2012-11-18 15:35 PST

3
  • 1
    Dah, this needs to be fixed :(. Hope people votes for the issue.
    – Johan B
    Jan 10, 2012 at 18:11
  • 3
    Make sure to vote for the bug that is blocking it too. Apr 25, 2012 at 19:02
  • Wow, it's been almost 3 years and the bug is still there. Hope it will get fixed eventually. Jun 8, 2012 at 15:19
1

It works for IE and chrome. Only firefox doesn't seem to be working for me.

The only way I know of to fix that in firefox is like this (just wrapping the textbox inside a div with the correct padding)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>% padding</title>  
        <style>
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
        border:none;

    }

    div.content {
        width:50%;
        margin:0 auto;
        background:#eee;
    }
    div.content form {
        width:100%;
    }
        div.content form ul {
            list-style:none;
            margin:0;
            width:100%;
        }
        div.content form li {
            position:relative;
            margin-bottom:20px;
            height:64px;
            width:100%; /*  width is declared */
        }
        div.content form li label {
            position:absolute;
            width:auto;
            left:0;
            top:0;
            line-height:20px;
        }
        div.content form li .text {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
        }
        div.content form li .textbox {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
            border:1px solid #ccc;
            background-color:white;
        }

        .textbox {
            width:100%;
            border:solid 1px white;
        }
    </style>
</head>
<body>
    <div class="content">
    <form action="" method="get">
        <ul>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>

        </ul>
    </form>
    </div>
</body>
2
  • Oh, and doctype.com is a better place for html formatting questions, since it is designed specifically for that. Sep 18, 2009 at 21:22
  • Unfortunately, doctype is too poorly designed for me to handle. It doesn't seem "specifically designed", just different for no reason.
    – arbales
    Oct 27, 2009 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.