Newbie question – IE7 layout problem

[NotSoFast]

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

[Chris Coyier]

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.

[NotSoFast]

Thanks Chris – brilliant.

[Chris Coyier]

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.

[Author]

Posts