Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Newbie question – IE7 layout problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22539
    NotSoFast
    Member

    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

    #46815
    Chris Coyier
    Keymaster

    Hey Simon,

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

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

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

    #46825
    NotSoFast
    Member

    Thanks Chris – brilliant.

    #46826
    Chris Coyier
    Keymaster

    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.