Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?

I

10

3

So, in upgrading to Firefox 3.6, the CSS broke on input boxes. The padding has increased -- it might also be the font-size is somehow behaving different. Wondering if anyone else has seen this problem yet. Can't quite figure it out.

HTML CODE:

<form>
    <fieldset>
        <label for="inputField">Label</label>
        <input type="text" id="inputField" />
    </fieldset>
</form>

CSS CODE:

form fieldset label {
    display:block;
    font-size:1.2em;
    font-weight:bold;
    padding:12px 9px;
}
#jumptoBox fieldset input {
    background: url("../images/input.png") no-repeat scroll left top transparent;
    font-size: 1.2em;
    padding: 4px 5px 16px;
    width: 99px;
    height: 29px;
}

(Image dimensions: 109 width x 34 height)

So one thing to note, the fix (as outlined below) includes removing the height, or at least setting it to auto, and then compensating for it by using padding (a fix that bothers me on many levels, but we'll set that aside for now). BUT webkit seems to have its own problems with this now, since it wants to center the text vertically (ignoring any evidence of line-height) according to the height of everything. In other words, if you want the text vertically closer to the top, I haven't been able to figure out a way to do that.

Ideas?

Involutional answered 25/1, 2010 at 16:26 Comment(5)

Can you post the CSS or a link? – Cacka 25/1, 2010 at 16:34

3.6 has a new rendering engine, see a similar problem here: #2120999 – Fermentation 25/1, 2010 at 16:49

Yes, I actually saw that problem/question when I was searching for a fix. I actually reverted back to Firefox 3.5.7 because I just didn't have time to deal with it. I'll try and provide more info when I can (css for example). One thing I did notice -- it's not the only place it's happening on this particular site when I did the upgrade, so it's not just isolated to one place on the site. – Involutional 27/1, 2010 at 23:34

Sounds like a lot of folks are saying it relies on padding, not height, which is disconcerting because font rendering sizes vary from browser to browser, which is why I like to rely on height to control the height of inputs (makes sense, right?) But I'll give this a go when I get a chance. – Involutional 17/2, 2010 at 17:51

Uuuuugh. This is ongoing. It now appears to break in IE. IE wants to position text toward the top. Clearly I am missing something. Right now I've fixed via IE specific styles, but what a pain! – Involutional 18/3, 2010 at 18:0

A

4

Here are a few tips to fixing the problem, as you haven't posted enough information for any concrete suggestions:

Do you use a doctype?
Do you use a reset stylesheet?
Have you validated your markup (HTML and CSS)?

Aldos answered 25/1, 2010 at 16:46 Comment(1)

Yes, use doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Using YUI reset. – Involutional 18/3, 2010 at 16:20

C

3

Firefox 3.5 and Firefox 3.6 render input css padding differently. I did this and it fixed my inputs. I removed the height and added padding to the top and bottom. The padding heights in combination with my font height made the input the correct height in both browsers and the text to display in the center as I type.

BROKEN:

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    height:19px;
    padding:5px 2px 0 2px;
}

FIXED:

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    padding:5px 2px;
}

Che answered 2/2, 2010 at 15:22 Comment(0)

R

2

I'm getting the exact same problem with my own site. I have a public version you can see at: http://www.cleantelligent.com/login-example/

For me it has to do with setting a css image background on the text / password input.

Adding the reset stylesheet (in a local copy) didn't make a difference, and the CSS validates.

EDIT: Removing the height in the CSS and adding more padding seems to do the trick. I narrowed it down to that FF 3.5 and IE put the text at the top of the input vertically, while FF3.6 and webkit center the text vertically. Using padding instead of height to make the box bigger allowed the text to be placed correctly.

Reilly answered 25/1, 2010 at 20:17 Comment(1)

I originally marked this as an answer, but it still seems to break in webkit for images where the text needs to be closer to the top or bottom. Webkit tries to center things vertically. Ideas? – Involutional 18/3, 2010 at 16:30

R

2

I had to remove the line-height too, to make it work in IE.

Rafaelrafaela answered 8/2, 2010 at 11:15 Comment(0)

O

1

Removing the height attribute from the input box and defining the vertical spacing by only using padding solved the problem for me.

Octosyllabic answered 5/2, 2010 at 11:42 Comment(0)

A

1

Padding issue can be solved with this:

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner
{
 padding: 0px; border: 0px
}

Affettuoso answered 28/1, 2011 at 13:55 Comment(0)

D

0

n'thing this issue in FF 3.6. Here's the site where it's happening for me: http://www.pointtopointsurvey.com/ (search box)

I'm using an xhtml transitional doctype and when I run my CSS through validation the only errors I receive are my browser based CSS3 properties (-moz-border-radius).

I'm also using a slightly modified version of Eric Meyer's CSS reset

I would also note that it seems to have only affected vertical padding, not horizontal padding.

Detriment answered 25/1, 2010 at 23:37 Comment(0)

Y

0

I fixed this problem with an extra !important css for just inputs, like this:

input.gld-editable-input {
 padding: 3px 6px !important;
}

Solved the problem in FF3.6 but let me keep the already working padding in Webkit...

Yetta answered 26/1, 2010 at 15:42 Comment(0)

C

0

yep- the cobination of height + padding was breaking it for me in FireFox 3.6. I removed the height on my input and compinsated the loss of this value by increasing the padding on the bottom of the given element. It is fine now. The only problem i have had with FF 3.6 to date was with online forms & input.

(my inputs were using background images)

Cundiff answered 25/2, 2010 at 17:7 Comment(1)

Also see my solution for the webkit scenario. – Involutional 18/3, 2010 at 16:43

I

0

Okay -- I just thought of an (annoying) fix for the webkit problem: add equal parts padding on top and bottom, and align the image positioning down enough to center the text. Anyone have any other (better?) ideas? This only works well in this situation because the input is absolutely positioned. In other scenarios I might have to include a negative top margin to compensate for the extra padding on top, which I try and avoid typically.

Also, don't forget to remove the height, as indicated already in other comments.

Involutional answered 18/3, 2010 at 16:42 Comment(1)

Also, needs IE specific styles, since IE wants to position the text at the top vertically. – Involutional 18/3, 2010 at 18:1

Recommended topics

Hot tags