Grow your CSS skills. Land your dream job.

IE Inline-block fix/hack

  • # October 27, 2012 at 1:24 pm

    I have stumbled upon my first issue with IE (first website), where inline-block well isn’t inline-block. I know that there are possibilities out there with html5shiv and modernizer but i am confused on the execution. Any help would be awesome.

    # October 27, 2012 at 1:26 pm

    We’d need to see the actual issue..do you have a link?

    What is happening that you didn’t expect or, rather, what isn’t happening that you did expect?

    # October 27, 2012 at 1:48 pm

    Well i for one have not seen it for myself but i have gotten complaints from users that when using IE(6+) that things aren’t placed where they are suppose to. So if you have internet explorer and ay other browser you will be able to see it. http://www.foursquaresummiteast.org

    # October 27, 2012 at 5:31 pm

    What things are in the wrong place?

    # October 27, 2012 at 9:47 pm

    sidebar-left and #main are suppose to be right next to each other, but instead #main starts at the bottom of #sidebar-left @Paulie-D

    # October 27, 2012 at 10:00 pm

    Can you create a http://codepen.io/

    # October 28, 2012 at 1:17 am

    You could add a conditional stylesheet to your head that will add styles for users browsing on ie 7 and below (since ie8 + support inline-block and < ie8 only has partial support).

    Add this to your head:

    Then create iestyles.css and add something like this to it:

    #main, #sidebar-left {
    display: block;
    float: left;
    }

    #wrapper {
    margin: 0 auto;
    width: 1200px;
    }

    #wrapper:after {
    clear: both;
    content: “”;
    display: block;
    }

    # October 28, 2012 at 4:31 pm

    @antwon would i need to do this for all inline-block level elements? (float left and set display to block)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".