CODEWITHSUNDEEP
cssinternet-explorerbuttoninternet-explorer-9
Angelo.Hannes
Angelo.Hannes

Reputation: 1729

min-width on button causes space to the right of it in IE

I am currently investigating strange behavior of the CSS min-width property in Internet Explorer. I heard about bugs with the text alignment, using min-width. But this one is new to me.

<table cellspacing="0" cellpadding="0">
  <tr>
    <td><button>Einloggen</button></td>
  </tr>  
</table>

When I set min-width of the button to a value that would actually stretch the button a space to the right of it emerges/ the td gets wider. I only saw this behavior in IE. Checked with Opera, FF, Chrome and Safari, too.

Here is a jsfiddle showing containing an example.

Is this a known bug? And are there any workarounds?

Upvotes: 2

Views: 1245

Answers (4)

Sampson
Sampson

Reputation: 268344

There does appear to be a strange issue at play here with Internet Explorer 9. It's interesting that versions 8 and 10 both render this demo properly, without issue.

That being said, with regards to IE9, I have found a workaround that seems to resolve the issue. My success was with using the pseudo-element ::before as a fallback:

/* For everybody but IE9 */
button {
    min-width: 200px;
}

/* For Internet Explorer 9 */
button::before {
    content: "" \9;
    display: block;
    width: 200px;
}

Fiddle: http://jsfiddle.net/JNDUz/21/

While this works, it does result in a slightly wider button in Internet Explorer 10 (pseudo-element width + parent padding/margins). These hacks have no business in IE10, but it's difficult to isolate them in CSS alone to certain browsers. The \9 trick can isolate this from non-IE browsers, but there's a better way:

<!--[if IE 9]><html lang="en-us" class="no-js ie9"><![endif]-->

By wrapping the HTML tag in a conditional comment, we can now target IE alone with our fix:

/* For Internet Explorer 9 */
.ie9 button::before {
    content: "";
    display: block;
    width: 200px;
}

Upvotes: 6

Max West
Max West

Reputation: 755

The workarounds above seem to work fine, but consider also that cellspacing and cellpadding are deprecated from the CSS/HTML spec. Perhaps the deprecated status has something to do with it.

Upvotes: 0

Morpheus
Morpheus

Reputation: 9065

I believe it's not valid markup, but wrapping Einloggen word to div fixes the issue.

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <button>
                <div>Einloggen</div>
            </button>
        </td>
    </tr>
</table>

jsfiddle

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

Well that was little weird, it adds padding to the right of the button, but I managed to get the least space on right, by using this

button {
   padding: 0;
}

Upvotes: 1

Related Questions