CODEWITHSUNDEEP
htmlcssinternet-explorer
Snote
Snote

Reputation: 955

Inline span with min-width on IE

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>

Upvotes: 15

Views: 18808

Answers (3)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 26

ramsesoriginal
ramsesoriginal

Reputation: 1920

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.

Upvotes: 1

xdevel
xdevel

Reputation: 204

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

Upvotes: 1

Related Questions