treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] IE inline-block problem

  • Hello. I'm asking for help with a problem I came across in IE9. I'm developing a website with fluid design and I have a nested list. The outer list has CSS styling ul-"display:block" and li-"display:inline-block". The nested list has display list-item. Everything works fine in other browsers but IE....he has a mind of it's own :) the list is displayed as inline-block. If I remove it from the outer list everything is fine. I looked everywhere for the answer but I did't find anything specific on the subject. Thanks for the help! If needed I will post the code.

  • Do you have anchors in this list that you want to be click able?

  • Yes. One in each one.

  • Well, it's usually best to add;

    display: block;
    

    to the anchors themselves to maximise the clicking area if padding is applied etc.

    also, instead of;

    display: inline-block;
    

    try using;

    float: left; 
    
  • make sure its is actually rendering as IE9 not IE9 emulating an earlier version aswell