no-wrap issue in IE 7

Question

HTML:

<ul id="popular-tags-hidden">
<li id="tag-1"><a class="display-new-tag" href="#">Tag 1<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-2"><a class="display-new-tag" href="#">Tag 2<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-3"><a class="display-new-tag" href="#">Tag 3<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-4"><a class="display-new-tag" href="#">Tag 4<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-5"><a class="display-new-tag" href="#">Tag 5<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
</ul>

CSS:

ul#popular-tags-hidden li {
    float: left;
    overflow: hidden;
    margin: 3px 6px 3px 0;
}

a.delete-new-tag, a.display-new-tag {
    float: left;
    background: #e2f2ce;
    height: 20px;
    padding: 0 5px 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
    color: #466840;
}

IE 7 Result:

IE 7 Issue

Desired Result:

Desired Result

The tags get cut off on the right side of the ul container. I have tried researching the problem and I think it has something todo with the padding, but I can't figure it out. Works in all browsers except IE7.

score 5 · Accepted Answer · edited May 23 '17 at 11:45

5

One way to fix it is to switch from float: left to display: inline-block on the lis.

It's less hassle if you do this for only IE7:

ul#popular-tags-hidden li {
    float: left;
    overflow: hidden;
    margin: 3px 6px 3px 0;

    /* just for ie7 */
    *float: none;
    *display: inline;
    zoom: 1
}

Compare:

float: left (as you had it): http://jsfiddle.net/cqSUy/

display: inline-block for only IE7: http://jsfiddle.net/CfXq6/

About *display: inline; zoom: 1 - Inline block doesn't work in internet explorer 7, 6

In short, it's how you say display: inline-block for IE7.

edited May 23 '17 at 11:45

Community

1
1

answered Jun 22 '11 at 17:02

thirtydot

224,678
48
389
349

+1: floats are horrible; I always prefer `inline-block` over `float`. – Spudley Jun 23 '11 at 15:38
No problems with floats, but this type of CSS hack with asterisks, etc. is bad news. – doublejosh May 08 '12 at 16:57
@doublejosh: `*` is fine, and is widely used. For example, [making `display: inline-block` work in IE7](https://github.com/twitter/bootstrap/blob/b261f97/less/mixins.less#L42) (example from Twitter Bootstrap). Also, read this: http://mathiasbynens.be/notes/safe-css-hacks#safe-css-hacks. – thirtydot May 08 '12 at 18:28

no-wrap issue in IE 7

1 Answers1