Grow your CSS skills. Land your dream job.

Strange display bug in IE

  • # July 6, 2009 at 7:51 am

    I’m really stumped at what IE is doing and cannot seem to fix the layout.

    I have a menu, made up of an unordered list, within a floated div. In Safari and Firefox this works fine and looks how I would expect it. In IE I just cannot get the thing to work!

    Below is the layout

    Code:

    stuff

    And here is some of the relevant CSS

    Code:
    #container{
    margin-right:22px;
    margin-left:22px;
    }

    #header, #menu, #content, #sub_section, #footer{
    overflow:hidden;
    display:inline-block;
    margin:5px;
    }

    #header, #menu, #footer{
    width:958px;
    }

    #menu{
    float:left;
    width:720px;
    margin-top:-21px;
    }

    #content{
    float:left;
    width:720px;
    padding:10px 10px 10px 10px;
    }

    #sub_section{
    padding-left:25px;
    width:180px;
    height:700px;
    }

    #footer{
    clear:both;
    font-size:0.7em;
    text-indent:10px;
    }

    The page is viewable at http://minimalpixel.net, view it in IE to see the problems.

    I have tried everything I can think of to try and solve this problem, trying to give everything relevant hasLayout etc, but to be honest I can’t even work out what the bug is, so trying to solve it is proving all the more hard!

    Any help is much appreciated!

    # July 6, 2009 at 8:13 am

    Just noticed that I haven’t posted the css for the tabs….

    Code:
    #tabs{
    list-style:none;
    padding:8px;
    padding-bottom:10px;
    background:url(http://cdn.css-tricks.com/images/tab_background.png);
    clear:both;
    }

    #tabs li{
    display:inline;
    margin-right:20px;
    padding:8px;
    }

    #tabs li.active{
    border-bottom:1px solid #AAAAAA;
    }

    #tabs li.active a{
    color:#FF2782;
    font-size:1em;
    font-weight:700;
    }

    #tabs li a{
    color:#AAAAAA;
    font-size:0.8em;
    text-decoration:none;
    margin-bottom:10px;
    padding-top:20px;
    }

    #tabs li a:hover{
    color:#2093A8;
    }

    #menu{
    padding:0px;
    }

    # July 6, 2009 at 8:21 am

    sorry where is the problem, you have said there is a problem, we don’t know how it is suppossed to lok or work, maybe you can help us understand the problem fully??????

    # July 6, 2009 at 8:32 am

    Sorry, I should have explained better.

    If you see the navigation links at the top, "Welcome" "Blog" etc, they are not positioned correctly, the list holding this links is too far to the right and also to far to the top, so much so that it is obscuring part of the header.

    Also there is a problem with the right hand column, which is also not displaying properly, I suspect this might be because the nav menu is shifted to the right as described above.

    I have included an image of how it should look in safari, I hope this helps.

    # July 6, 2009 at 10:41 am

    Ok, I have made some progress….

    The right hand column, where the sign up, demo and login sections are, should have started right at the top of the page, however because IE doesn’t display floats properly it wasn’t, there is more info here http://css-class.com/articles/explorer/ … rtest1.htm

    Basically I made sure that all the floats were clearing each other, this seems to have solved this problem in IE. Now I still have to get to the bottom of the other display issue, the nav bar not displaying in the correct place, I have a feeling though that is might be something similar…..

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

You must be logged in to reply to this topic.

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