position:absolute incompatibility in Chrome and Firefox

Question

My problem is this: I have a form, and I put in this, of course, the <input>. But in all inputs is having a little problem of compatibility between Chrome and Firefox. I believe that Chrome increases 2px on top compared to Firefox. I'm going to pass code. What should I do? Using different values in CSS for webkit and moz? Here is my HTML:

<div id='FirstName_container'>
   <input type='text' name='FirstName' id='FirstName' value='' size='20' class='name1' placeholder="First name"/>
</div>

Here is the CSS:

#contact_form1 #FirstName_container {
    position:absolute;
    left:152px;
    top:12px;
    z-index:5;
}

What I can do? Thanks all in advance!

Can you tell exactly what is increased? I can see only one difference between Chrome and FF - it's placeholder position. http://jsfiddle.net/RGZch/ — Morpheus, Mar 12 '13 at 13:45
Morpheus: Chrome seems that increases 2px top compared to Firefox. sam_7_h: no, I'll try it. Thanks. — Manoel, Mar 12 '13 at 13:52
Sandeep: like this? http://meyerweb.com/eric/tools/css/reset/ — Manoel, Mar 12 '13 at 13:57
I dont see any difference either, tested in FF and Chrome http://jsfiddle.net/AwMuh/ there must be some other style/element causing your problem... — Gatekeeper, Mar 12 '13 at 14:10
Reset> if the one from E. Meyer doesn't work, a more specialized one like http://isellsoap.github.com/forms.css/ should do the trick (Chrome is really really f... err hard to (un-)style). — FelipeAls, Mar 12 '13 at 14:15
Gatekeeper: I saw in FF, comparing here Chrome and Firefox, have a incompatibility with top! Well, I'll take a print. Wait a minute. — Manoel, Mar 12 '13 at 14:15
Do you have to correct this 2px difference? If you've to align vertically with other blocks, OK it needs to be pixel-perfect in height but otherwise you're the **only** one to see your site on 2 different browsers. People won't notice that... They either use IE or Chrome or Firefox or Opera or Safari — FelipeAls, Mar 12 '13 at 14:17
Ok its there sory... I tried to set margin: 0px to input element and it worked, div shrinked from 26px height to 22px... try it http://jsfiddle.net/AwMuh/1/ — Gatekeeper, Mar 12 '13 at 14:23
Please all see the problem. I calculated, and how I felt, exactly two pixels of difference! http://img607.imageshack.us/img607/4907/problemp.png — Manoel, Mar 12 '13 at 14:32
@FelipeAls hehehe I know, but I'm a perfectionist. This issue does not bother me much. I just would like to solve it! But if not, I will not mind. — Manoel, Mar 12 '13 at 14:35
I do not think it will take to resolve. Better hope that browsers correct this mismatch between them. — Manoel, Mar 12 '13 at 14:42

score 3 · Answer 1 · answered Mar 12 '13 at 14:05

3

Put this at the top of your CSS.

*
{
    margin:0;
    padding:0;
}

This will make all margins and paddings default to zero. I add this to the beginning of every project and then I change individual margins or paddings when I need to.

answered Mar 12 '13 at 14:05

MiniRagnarok

959
11
23

Please all see the problem. I calculated, and how I felt, exactly two pixels of difference! http://img607.imageshack.us/img607/4907/problemp.png – Manoel Mar 12 '13 at 14:31
Yeah I know. I agree that it's two pixels difference. – MiniRagnarok Mar 12 '13 at 14:39

score 0 · Answer 2 · answered Mar 12 '13 at 14:38

0

By using below you are giving #FirstName_container a position absolute:

#contact_form1 #FirstName_container {
    position:absolute;
    left:152px;
    top:12px;
    z-index:5;
}

You should give the parent of #FirstName_container a position relative and left and top values. That should help fix this.

#contact_form1{position:relative;top:XXpx; left:XXpx;}

answered Mar 12 '13 at 14:38

defau1t

10,593
2
35
47

But this will only move the position of the whole form. The difference of 2 pixels remain there. – Manoel Mar 12 '13 at 14:46
And this problem of 2 pixels is in all the form elements. – Manoel Mar 12 '13 at 14:53

score 0 · Answer 3 · answered Apr 04 '14 at 07:42

0

Most common errors created when using span instead of div with absolute position. If you use div elements you'll generally see a better compatibility to all browsers from my experience.

answered Apr 04 '14 at 07:42

batspy

385
5
7

score -3 · Answer 4 · answered Mar 12 '13 at 15:58

-3

I managed to solve the problem! Just added margin: 0; across all elements. Thanks to everyone who helped.

answered Mar 12 '13 at 15:58

Manoel

33
1
2
8

Lol Lol Lol Lol Lol Lol Lol – jofftiquez Sep 01 '15 at 21:59

position:absolute incompatibility in Chrome and Firefox

4 Answers4