CODEWITHSUNDEEP
htmlcssfirefox
Jack
Jack

Reputation: 97

Firefox top padding difference (comparing to other browsers)

I haven't found a clear solution for this problem, so I decided to create this topic. There is a very annoying Firefox feature:

<!DOCTYPE html>
<html>
<head>
<style>
    div{
        line-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        width: 31px;
        height: 50px;
        font: 15px Verdana;
        background: #0F0;
    }
</style>

<body>

<div>test</div>

</body>
</html>

Here is the result (200%):

https://i.sstatic.net/cjqP7.jpg

As you see, top padding in Firefox is bigger (6px) than top padding in other browsers (5px). How to solve this?

EDIT: any css reset doesn't fix it.

Upvotes: 1

Views: 580

Answers (3)

paddotk
paddotk

Reputation: 1440

put this on top of your css:

 DIV {  /*let Firefox stick to the padding web standards*/
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        margin:0;
        padding:0;
    }

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75379

This is usually the case when there is no default value normalization being done in your css, which is why such tools such as the normalize.css and the reset stylesheets have come about. Such tools try to normalize and reset the default values set by the user agents (browsers).

Upvotes: 1

sethcall
sethcall

Reputation: 2897

Try yui-reset. It can remedy problems like these and other differing default behavior across browsers.

http://developer.yahoo.com/yui/reset/

Upvotes: 0

Related Questions