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

IE Inline-block fix/hack

  • 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.

  • 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?

  • 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. www.foursquaresummiteast.org

  • What things are in the wrong place?

  • 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

  • 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;
        }
    
  • @antwon would i need to do this for all inline-block level elements? (float left and set display to block)