Grow your CSS skills. Land your dream job.

IE positioning

  • # May 10, 2009 at 8:34 am

    Can anyone tell me how to fix this annoying positional problem I am having with my site

    http://www.hannaford-forensic.com/

    I want the side nav buttons to be aligned with the grey academy of experts box – they are fine in mozilla but unaligned in ie

    this is the css I use

    Code:
    #buttons {
    float: left;
    width: 220px;
    vertical-align: top;
    background-image: url(images/images/icons2_03.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    border-bottom-color: #666666;
    left: 0px;
    top: 0;
    padding: 0px;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }

    #greybox {
    background-color: #FFFFFF;
    height: 90px;
    width: 220px;
    float: left;
    position: relative;
    left: 0px;
    background-image: url(images/law.jpg);
    background-repeat: no-repeat;
    background-position: center;
    top: 10px;
    }

    Any help would be much appreciated

    # May 10, 2009 at 3:18 pm

    I don’t think I’ve ever seen so many unnecessary divs on one page. :D lol

    You could try floating your list to the left.

    Code:
    #buttons ul {
    background-color:#FFFFFF;
    float:left;
    list-style-type:none;
    width:220px;
    }
    # May 10, 2009 at 8:06 pm

    tried that – no joy

    # May 10, 2009 at 10:34 pm

    You haven’t tried it on the page you are linking to.

    Lose this line:

    Code:
    ul {
    list-style-position:inside;
    }
    # May 10, 2009 at 11:38 pm

    i believe this is due to having both padding and width declared in the same section

    you may want to try wrapping a div around it and giving that div padding

    it way work for you

    # May 11, 2009 at 4:01 am

    bingo

    thanks apostrophe

    i thought that having buttons ul – display: block

    would overide ul: inline

    obviously not

    many thanks

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

You must be logged in to reply to this topic.

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