Grow your CSS skills. Land your dream job.

Newbie question – IE7 layout problem

  • # April 5, 2008 at 2:39 pm

    Hi All,

    I’m literally just starting so please forgive me if I’m missing somthing VERY simple. I have been playing at creating a page a bit like the one Chris makes in his first video tutorial, but I can’t get the buttons to display correctly in IE7.

    Here are the two screenshots:

    [attachment=1]Firefox.jpg[/attachment]
    [attachment=0]IE7.jpg[/attachment]

    And here’s the code:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    body {

    font-size: 62.5;
    font-family: Calibri, Verdana, Arial;
    background: #FFFECC url(../slice.jpg) repeat-x top;
    }

    div#page-wrap {
    width:660px;
    margin: 0 auto;
    }

    /*div#main-content {
    width:660px;

    }*/

    div#footer {
    background: #88A157;
    color:#EDECE8;
    text-align: center;
    font-weight:bold;
    text-decoration:none;
    font-variant:small-caps;
    font-size:0.8em;
    border-top: 2px solid #EDECE8;
    padding: 3px 0px;
    margin: 30px 0px;
    }

    li {
    font-size: 0.9em;
    font-weight: normal;
    }

    ul#nav {
    height: 248px;
    background: url(../main_head.png) no-repeat;
    margin-top:70px;
    list-style:none;
    }
    ul#nav li a {

    display: block;
    width:120px;
    float: left;
    margin-top:100px;
    color:#EDECE8;
    text-align:center;
    font-weight:bold;
    text-decoration:none;
    background: #876961;
    border: 2px groove #EDECE8;

    }
    ul#nav li a:hover, ul#nav li a:active {
    background: #C97E6F
    }

    I’m sure it’s something very simple, so please be gentle!!!

    Thanks in advance,

    Simon

    # April 5, 2008 at 2:52 pm

    Hey Simon,

    Looks like you are having the classic "stepdown" problem. You can read about it here:

    http://css-tricks.com/prevent-menu-stepdown/

    Basically adding display: inline; to your list items in the menu will fix that.

    # April 5, 2008 at 5:13 pm

    Thanks Chris – brilliant.

    # April 5, 2008 at 5:29 pm

    Someone else pointed out in the comments of that article that setting line-height to 0 will have the same effect. I’m thinking this might be an even smarter way to go actually. There is something unsettling about putting a block level element (the anchor links) inside inline elements (the list items). List items are by default blocks, and blocks inside of blocks is much nicer. If you try out the line-height: 0; thing, let me know how it works for you.

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

You must be logged in to reply to this topic.

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