CODEWITHSUNDEEP
cssinternet-explorerfirefoxbackground-image
Yoot
Yoot

Reputation: 657

Background-image margin on button in IE

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.

Upvotes: 3

Views: 1582

Answers (3)

Lasse Espeholt
Lasse Espeholt

Reputation: 17792

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.

Upvotes: 1

Jay-Bird23
Jay-Bird23

Reputation: 61

Different browsers have different generic style standards for different html elements. To avoid this problem (or defend against it the best you can!) you should really include a reset style sheet in all your sites to try and synchronise the styles of all browsers best you can. One of the greats I have found is Erics Archived thoughts:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

This typically does the trick (with a few little tweaks after a penultimate cross browser test).

Upvotes: 0

Ravi Sharma
Ravi Sharma

Reputation: 873

I didn't faced such problem with your code, probably this is because you ie version is older one.

Upvotes: 0

Related Questions