Inline span with min-width on IE

Question

Hi
I have 3 SPAN that must be inline and have and a min-width.
Apparently on IE, the SPAN can't have an min-width. I try to use DIV but when I put it inline, the min-width is ignore.

CSS

span {
    display: inline;
    min-width: 150px;
}

HTML

<span>1</span>
<span>2</span>
<span>3</span>

Answer 1

inline element can't take width, height, vertical margin & padding. So you have to define display:inline-block; write like this:

span {
    display: inline-block;
    *display: inline;/* for IE7*/
    *zoom:1;/* for IE7*/
    min-width: 150px;
}

Source: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:

The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

check this http://jsfiddle.net/yCvhB/5/

Answer 2

you could use padding.
since you made the element inline there is no point of specifying min-width.

Answer 3

Basing my answer on sandeep's answer, you can use

span {
    display: inline-block;
    *display: inline;
    *zoom:1;
    width: auto !important;
    width 150px;
    min-width: 150px;
}

and it should work. Check out this jsfiddle: http://jsfiddle.net/ramsesoriginal/yCvhB/2/

internet Explorer has some problems with minimum widths and heights, but at the same time it has problems with !important, so exploiting that (and the fact that without specifying overflow every with is a min-width for IE) we can have something working.