Buttons with css: problems with min-width in IE7

Question

I want to use CSS for buttons. For some buttons I use input elements, for other - links. For buttons with short text I want to set min-width. For all buttons I want align text to center and set padding. Also somewhere on portal table layout is used. Code below looks good in FF, but not in IE7: enter image description here

Incorrect text align in inputs
Something bad happens with 'a' when it is in table

I know that there is problem with min-width in IE7 but it should works when 'display: inline-block' is set. Also I remember that padding is not included to width, but I can't explain what I see. The only way I see is add class "btn-short" with fixed width and remove min-width from common button. Is it best solution or there are some fixes for min-width for IE7?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        input.btn {
            height: 26px;
            display: inline-block;
            min-width: 80px;
            overflow:visible;
        }

        a.btn {
            height: 19px;
            display: inline-block;
            min-width: 60px;
            background: none repeat scroll 0 0 #008000;
        }

        .btn {
            background: none repeat scroll 0 0 darkblue;
            color: #FFFFFF;
            font-family: Verdana, Tahoma, sans-serif;
            font-size: 14px;
            padding: 4px 10px 3px;
            text-align: center;
            text-decoration: none;
            border: none;
            white-space: nowrap;
        }

        td {
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <input type="submit" value="Search" class="btn"/>
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="button" value="Clear" class="btn"/>
        </td>
    </tr>
</table>
<br/>
<input type="submit" value="Search" class="btn"/><br/><br/>
<input type="button" value="Clear" class="btn"/><br/><br/>
<input type="button" value="Change Default Values" class="btn"/><br/><br/>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a href="#" class="btn">Search</a>
        </td>
        <td>&nbsp;</td>
        <td>
            <a href="#" class="btn">Clear</a>
        </td>
    </tr>
</table>
<br/>
<a href="#" class="btn">Search</a><br/><br/>
<a href="#" class="btn">Clear</a><br/><br/>
<a href="#" class="btn">Change Default Values</a><br/><br/>
</body>
</html>

You have to use a [hack](http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block) to make `display: inline-block` work for IE7 — Vucko, Feb 21 '14 at 10:01
@AmarnathBalasubramanian As I understand you paste my code to jsfiddle. I didn't do it because jsfiddle doesn't work in IE7. Why did you do it? — Valentina Chumak, Feb 21 '14 at 10:23
@Vucko I've tried code from Hashem comment below with this hack, but it doesn't work. — Valentina Chumak, Feb 21 '14 at 10:25

score 0 · Answer 1 · answered Feb 21 '14 at 10:05

0

inline-block doesn't work on IE7, you need to trigger hasLayout by using zoom: 1; including display: inline to fake the display-inline effect:

input.btn {
    height: 26px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    min-width: 80px;
}

a.btn {
    height: 19px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    min-width: 60px;
    background: none repeat scroll 0 0 #008000;
}

FYI: The star-hack is used for IE 6/7.

answered Feb 21 '14 at 10:05

Hashem Qolami

97,268
26
150
164

Thank you for answer, but it doesn't help. Result looks the same (I've double checked). – Valentina Chumak Feb 21 '14 at 10:15
@ValentinaChumak You probably need to use `min-width` hack for IE 6/7 as well. take a look at: http://stackoverflow.com/questions/7068967/css-how-to-make-ie7-respect-min-width – Hashem Qolami Feb 21 '14 at 11:18

Buttons with css: problems with min-width in IE7

1 Answers1