CODEWITHSUNDEEP
csscsslint
Ryan
Ryan

Reputation: 10101

Ignore star hack completely in CSSLint?

I have CSS like this to target Internet Explorer 6 specifically.

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100px;
}

When I run CSSLint via

csslint --ignore=star-property-hack test.css

it still shows this error:

width can't be used with display: inline.
    width: 100px;

Is there any fix?

Upvotes: 4

Views: 409

Answers (2)

Jesus Lugo
Jesus Lugo

Reputation: 796

The display: inline failover would be needed only if you need support for IE6 (IE7 and later understand display: inline-block without issues). I would recommend the following:

If you need to support IE6:

Separate the hack into a conditional stylesheet, only for IE6:

In Your Main Stylesheet:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

In ie6.css:

.inline-block {
    display: inline;
    zoom: 1;
}

If you don't need to support IE6:

Just use the code:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

And be happy.

Upvotes: 0

gp.
gp.

Reputation: 8225

that's correct... when display is inline, width has no meaning. Why would you set display to inline instead of inline-block?

Nevertheless, try putting the star property in another style with the same selector:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 100px;
}

.inline-block {
    *display: inline;
}

Upvotes: 2

Related Questions