Home/ Questions/Q 6701883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:59:14+00:00

Does someone know why there is a margin (about 1px) around the button background-image,

  • 0

Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?

Try this code in IE vs Firefox :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>test</title>
    <style type='text/css'>
        button {
            background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
            border: 1px solid black;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <button>LOL</button>
</body>
</html>

Here is how it is displayed on my computer in IE9 (in big size) :

button with background-image margin in IE

Notice : If I remove the (black) border, the margin disappears.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Differnet browsers have different definitions of the button tag (and other tags). In fact, Chrome have a margin of 2px. You can easily solved it by making margin explicit:

    button {
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
    border: 1px solid black;
    font-size: 24px;
    margin: 0; /* or ex 1px */
}

    Update:

    I think it is the font-family (or the rendering of it) which is different, try:

    button {
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
    border: 1px solid black;
    font-size: 24px;

    /* To get it exact */
    margin: 0; /* or ex 1px */
    padding: 0; /* or ex 1px */

    font-family: Consolas;
}

    Update:
    Without <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">     I can reproduce the problem. And in this case IE is running in Quirks mode. Do you include the doctype when you test it?

    Anyway, you just have to avoid quirks mode: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode
    Ex avoid ANYTHING before doctype.

    • 0