CODEWITHSUNDEEP
htmlcssfirefoxcross-browser
art2
art2

Reputation: 425

Why firefox display boxes different from Safari, IE, Chrome etc.?

I've been tackling this tiny but very annoying cross-browser CSS problem: For some reason Firefox displays boxes/input fields with different measurements from other browsers. It seems like firefox is somehow ignoring box-sizing: border-box and still measures the boxes by its own measures. What is the cause here? Is there any bubblegum solution to this? I'm ready for it.

What I'm doing here is dynamic jquery input field adder. The fields next to plus button are 'fakefields' which for some reason displays different in firefox:

enter image description here

Doctype: XHTML 1.0 Strict

CSS:

.fakeinpfield {
        border: 1px solid #C2C2C2 !important;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
}
input#fakeinpfield3 {
        width: 320px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;

}
input#fakeinpfield4 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
input#fakeinpfield5 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}

Upvotes: 2

Views: 2010

Answers (2)

Toping
Toping

Reputation: 755

I'm not sure why firefox do this, but I always come across this problem, and the last time my solution was to set border: none; and add a (input like) img as background, faking a input field, this way every input is gonna be the same size.

By the way, if I'm not wrong, Opera have another problem with the size too.

Upvotes: 1

art2
art2

Reputation: 425

Ok I solved it with box-sizing. Seems like I need to use different box-sizing for firefox, since it measures the the box differently (I also set the element to inline-block, but im not sure if this has anything to do with it in the end) More to read: http://www.quirksmode.org/css/box.html

input#fakeinpfield3 {
        width: 318px !important;
        margin: 3px 6px 0 0;
        -moz-box-sizing: border-box; 
        box-sizing: content-box;
        height: 26px;
        padding: 0;
        display: inline-block;
}

Upvotes: 1

Related Questions