SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox input percentual padding

    Hi,

    When adding a simple input field and giving it a padding-left of x% firefox seems to ignore this and resets the padding to 0px.

    Any idea what's causing this and if there is a workaround?

    Code:
    <input type="text" placeholder="blabla" />
    Code:
    input {
        
         width: 90%;
         padding-left: 5%;
         padding-right: 5%;
    }
    I've tested this in Firefox 4, Chrome, Opera, IE9 and Safari and all but FF4 seemed to do exactly what they're supposed to do.

    Thx

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'll need to see context as it works for me in FF4 with no problem.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    input {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }
    div{width:500px;background:red;border:2px solid red;}
    
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <div>
            <input type="text" name="test" id="test" />
        </div>
    </form>
    </div>
    </body>
    </html>
    Of course that makes the input too big to fit the container because of the default borders and so it sticks out.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Actually I can see what you are saying now and although the inputs width is increased by the padding the padding doesn't seem to be present when you enter text into the input.

    I'll have to test some more.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    It seems to work with em and px but not %. You could either use those or just add display: block to the input. (I thought I'd post this anyway, even though Paul will come pack with an authoritative answer, to which I look forward!)

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    px and em does indeed work, but I can't use those in this context as I'm working on a completely dynamic layout based on the width of the browserwindow.

    display: block didn't do anything for me.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by poenanie View Post
    display: block didn't do anything for me.
    Hmm, in what browser(s)? It works for me. Remember that the padding is inside the input, so is not obvious visually; but if you type in there, the text starts 5% from the left.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Seems to be a long standing bug in Gecko as I've tried older versions and then exhibit the same behaviour.

    The only solution I can see is to use text-indent:5% instead but that doesn't work in ie6/7 so you would need to hack ie6/7 and give them padding instead (or a pixel width for the indent).

    Your rule is still flawed because you haven't taken into account the 2px borders applied to inputs which will make the 100% width be exceeded.

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Seems to be a long standing bug in Gecko as I've tried older versions and then exhibit the same behaviour.

    The only solution I can see is to use text-indent:5% instead but that doesn't work in ie6/7 so you would need to hack ie6/7 and give them padding instead (or a pixel width for the indent).

    Your rule is still flawed because you haven't taken into account the 2px borders applied to inputs which will make the 100% width be exceeded.
    Those borders have been reset in the application I'm working on, I did not think of doing so in the short example I've posted.

    Thanks a lot for your reply, I'll try and make this work with indentation. I don't much care for IE6 anymore and a conditional stylerule for IE7 will take care of the rest.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by poenanie View Post
    Those borders have been reset in the application I'm working on, I did not think of doing so in the short example I've posted.
    Ok - I guessed as much

    Thanks a lot for your reply, I'll try and make this work with indentation. I don't much care for IE6 anymore and a conditional stylerule for IE7 will take care of the rest.[/QUOTE]

    Sounds like a plan as I couldn't see any other way around it unfortunately.


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
  •