Question

Before I explain, here’s the example HTML code:

[Demo on jsFiddle here.]

<div class="righty">
    <p id="breadcrumbs">
        <a href="http://example.com">Nerd Archive</a> » <a href="http://example.com/how-to/">Coding</a>
    </p>
</div>​

And CSS:

#breadcrumbs {
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
  background: #D9ECFF;
  padding: 1px 3px;
}

The max-width property seems to be quite compatible with IE7, but the background of the element (a breadcrumb in this case) which should fill the width of the element’s content, is extending to full-width in IE7. Here’s go screenshots for comparison:

Element in IE7:

Element in Modern browsers, in latest version of Chrome for example:

Is there a way to fix this? Hope I am clear enough. Thanks!

Answer 1

The only problem is that IE7 does not understand display: inline-block on elements that are not naturally inline, such as p. You can make it work using this:

display: inline-block;
*display: inline;
zoom: 1;

http://jsfiddle.net/thirtydot/s4DGB/4/