Firefox input percentual padding

HTML & CSS
1

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?


<input type="text" placeholder="blabla" />



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

Hi,

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


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

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

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

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

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

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

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

Ok - I guessed as much :slight_smile:

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.