CODEWITHSUNDEEP
htmlinternet-explorer-7css
user1537415
user1537415

Reputation:

Inline-block causing troubles on IE7

A few months ago, I made a site for a small company. They were very pleased about it, and so on. Now, I will do a small ecommerce for the same company, and integrate it to the site base. But, I was looking it with ie7, and noticed something terrible. The navbar, isn't displaying correctly. The links, normally listed on horizontal line, are on vertical line. How to fix this, this is urgent?

Here's the CSS of the nav:

.nav-ul  {
    margin: 0;
    padding: 0;
    position: absolute;
    left: -14px;
    top: 120px;
    background: #000;
    height: 31px;
    z-index:  2;
    width: 104%;
    background-image: nappulat/tyhja.png;
    background-repeat: repeat;
    text-align: center;
}

.nav-ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

.nav-ul li:hover {
    background-color: #b2080b;
}

.nav-ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-family: Verdana,  Geneva,  sans-serif;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

I know the conditional comments, would they give me an answer?

Upvotes: 0

Views: 978

Answers (3)

Henrik
Henrik

Reputation: 4044

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

Should work. Make sure you have a valid DOCTYPE set. You can remove "zoom:1" if there is something else that triggers hasLayout.

Upvotes: 0

Spudley
Spudley

Reputation: 168843

IE7 (and IE6) has some serious bugs with inline-block.

The main bug is that it only works at all for elements that have a default display style of inline.

<li> tags have a default style of list-item, and therefore display:inline-block; won't work for them in IE7.

There are two solutions:

  1. Add a <span> or similar inline tag inside the <li> (or instead of your <li>) and style that as inline-block instead. This may or may not have the desired effect for you, depending on what you're trying to achieve.

  2. Use an IE CSS hack. You can make IE7 do what you want if you set display:inline; and zoom:1;. This combination will work in IE6 and IE7 in the way inline-block is supposed to work. You'll need to work out a way to make this only happen in IE6/7, though, because obviously you'll want it to use inline-block in other browsers. There are various CSS hacks that can target these browsers, or you could use conditional comments. Either way, it's messy, but the only real solution if you want to support IE7.

(which brings up the third option, of dropping support for IE7 in your site...)

Upvotes: 3

Rodolfo
Rodolfo

Reputation: 4183

Not fully supported in IE 7 according to http://caniuse.com/inline-block (only for elements that are inline by default). It mentions alternatives here ... http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Conditional comments would help you if you have a version that looks ok in IE7 and have something else that looks better in newer browsers, so you would use different code for different browser versions

Upvotes: 0

Related Questions