Grow your CSS skills. Land your dream job.

display: inline-block issues in IE

  • # May 26, 2009 at 3:19 pm

    Probably not a surprise to many of you here. and I am sure I am not alone when it come to the frustrations caused by Microsoft’s inability to make things straight forward…

    I am working on a project where surprise surprise it works and looks right on all browsers except IE.

    I want a three column effect.

    here is the CSS I created to do so

    Code:
    #cpy .col3 {
    padding: 10px;
    height: 130px;
    width: 275px;
    display: inline-block;
    vertical-align: text-top;
    }

    and here is a snippet of the HTML

    Code:

    Welcome

    Column 1 text will go in here

    News & Events

    Column 2 text will go in here

    FREE MONTHLY HOME GUIDE

    New articles, do it yourself projects, and maintenance tips right in your email every month.




    You can see the results on my development server at http://guybiggsconstruction.designedbyjeff.com/

    I have never worried about it before having the attitude that it is the poor bugger’s using IE that have the problem but I guess it has just been my in ability to learn what needs to be done to cover my bases for all browsers… especially the ones most people use… FF, Safari and IE.

    So any help would be greatly appreciated.

    # May 26, 2009 at 3:30 pm

    Just add float:left to your style for #cpy .col3

    # May 26, 2009 at 3:55 pm

    niiiiiiice it work… something so simple. Any ideas as to why it works on other browsers without that?

    Just curious… but once again you have been a great help.

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

You must be logged in to reply to this topic.

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