Internet explorer 7 adds a 3 pixel bottom gap to my input type=image

Question

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>Demo page</title>
        <style type="text/css">
            input
            {
                border: 1px solid blue;
                padding: 0px;
                margin: 0px;
                display: inline-block;
            }
            td
            {
                border: 1px solid red;
                padding: 0px;
                margin: 0px;
                height: 20px;
                max-height: 20px;
            }
        </style>
    </head>
    <body>
        <form method="get" action="">
            <table cellspacing="0" cellpadding="0" style="width: 100%">
                <tr>
                    <td>
                        <input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
 </html>

And here's the screenshot:

IE7 3px bottom bug

This has been tested on IE8, and it appears both in IE7 mode, and in IE8 mode with IE7 standards mode. This does not appear in IE8 mode with IE8 standards. Other browsers (at least Opera and FF) do not show such a behavior.

Where does the bottom gap come from and why cannot I get rid of it no matter how many height: 20px and max-height: 20px I add?

I seem to be seeing the same in Chrome 6 – Pekka Nov 06 '10 at 10:14 — Pekka, Nov 06 '10 at 10:14

Steve · Answer 1 · 2010-11-06T10:29:25.610

5

I must admit that I struggle with this kind of thing myself but I think that what may be happening here is that the image is being aligned with the baseline of any text that would appear in its container (the td). So the browser is leaving space for the descender part of characters like 'y'.

You can try aligning the img to the bottom of the td with vertical-align: bottom or setting the line-height of the td.

edited Nov 06 '10 at 10:29

answered Nov 06 '10 at 10:14

Steve

15,606
3
44
39

`line-height` doesn't seem to have any effect but `vertical-align: bottom` does the trick for me in Chrome (where there is the same problem). – Pekka Nov 06 '10 at 10:17
I'm sorry, it seems I have been a bit hasty about simplifying my problem. For a `
` it works if I simply speficy `height: 20px`. My real problem is with a ``. I updated the question.
– Vilx- Nov 06 '10 at 10:30
I don't know whether setting the vertical-align on the img will work in a td. I have tried to reproduce this in Chrome 7 but I am not getting the problem there (and I don't have a copy of IE handy). – Steve Nov 06 '10 at 10:37
OK I was curious enough to open up my Windows machine and adding vertical-align: bottom to the input element does the trick with IE in IE7 Standards mode. – Steve Nov 06 '10 at 10:43
`vertical-align: bottom` it is. Works for me in Chrome 7, Firefox 3.5 and IE8 IE7 compatibility mode. I was able to make the problem happen in each of those browsers. – Bryan Downing Nov 06 '10 at 10:48
+1 since I was nearly tempted to drop IE7 support because of this. But it seems to happen not everywhere; an IMG in a TD showed the 3 pixels, an IMG in an A in a DIV in a TD didn't. – Rolf Aug 17 '14 at 11:17

score 4 · Accepted Answer · answered Nov 06 '10 at 10:47

4

You should try and remove the white space like so:

        <table cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
                <td>
                    <input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/><!--
                --></td><!--
            --></tr><!--
        --></table>

I know it's ugly.

IIRC, the HTML specs permit the rendering of trailing white space, so this is not a bug in IE.

answered Nov 06 '10 at 10:47

user123444555621

148,182
27
114
126

I just found out that it's the white space myself. Unfortunately I cannot remove white space like this, because I'm using ASP.NET and some controls I use add white space of their own. However setting `font-size: 1px` also seems to do the trick. – Vilx- Nov 06 '10 at 10:59
Let's wait a bit and see if a better answer appears. If not, I'll accept yours. – Vilx- Nov 06 '10 at 11:00
1

"However setting font-size: 1px also seems to do the trick." - Yep, I personally prefer `font-size: 0; line-height: 0;`, just to make sure. – user123444555621 Nov 06 '10 at 11:06

score 1 · Answer 3 · answered Jan 09 '13 at 20:03

Dionysios is correct about the "4 pixel margin" behavior, and that it is being caused by displaying the images as inline. But Internet Explorer doesn't necessarily recognize them as images, and therefore adds the 4 pixel margin along the bottom of any image.

Although you could use a conditional comment to identify specific Internet Explorer versions, and style them as suggested, there is a much simpler solution.

Add an inline style of "display: block;" to each image in the table. This will prevent Internet Explorer from adding the 4 pixel whitespace as it does when the elements are inline.

I have tested this in Internet Explorer 7, 8, and 9. The current versions of Firefox, Chrome, Safari, and Opera all handle it fine with or without the style.

The reason for this margin, just to add an explanatory comment to this solution, is that it allows trailing 'g's and 'p's, 'q's and any other letter which hangs below the line to fall within a division which otherwise contains no padding, rather than trail/overlap some other division. — Hektor, Nov 30 '14 at 18:06

score 0 · Answer 4 · answered Sep 01 '12 at 12:57

0

I think this is called "ie 4 pixel margin" bug and is caused by display: inline-block; The best solution is to add a margin-bottom: -4px\9 property for ie 8 and below.

answered Sep 01 '12 at 12:57

Dionysios Arvanitis

1,133
9
11

score 0 · Answer 5 · answered Nov 06 '10 at 13:00

0

@Vilx- Have you tried implementing Conditional Tags to override css behavior for IE7 only?

For Example:

<!--[if IE 7]>
<style type="text/css">
        form {margin:0px;}
        input {margin:0px;}
</style>
<![endif]-->

but what i really would like to suggest is that you try using a CSS Reset like this one on your page: http://meyerweb.com/eric/tools/css/reset/

answered Nov 06 '10 at 13:00

Zubair1

2,770
3
31
39

This wasn't a CSS problem, it was a browser bug (or perhaps an oddity, I cannot say). Also, I think that the Devexpress controls that I'm using already add something like this. – Vilx- Nov 06 '10 at 16:14

score 0 · Answer 6 · edited Nov 29 '11 at 18:29

0

If you write the code all on 1 line with no spaces between each item the spaces will go away. Example: Old creates spaces:

<tr>                     
<td>                         
<input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/>                     
</td>                 
</tr>

New no spaces:

<tr><td><input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/></td></tr>

edited Nov 29 '11 at 18:29

animuson

53,861
28
137
147

answered Nov 29 '11 at 18:27

JSList

1

1

To quote my comment at the accepted answer: "Unfortunately I cannot remove white space like this, because I'm using ASP.NET and some controls I use add white space of their own. " – Vilx- Nov 30 '11 at 09:49

Internet explorer 7 adds a 3 pixel bottom gap to my input type=image

6 Answers6