- This topic is empty.
-
AuthorPosts
-
April 5, 2008 at 2:39 pm #22539NotSoFastMember
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 #46815Chris CoyierKeymasterHey 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.
April 5, 2008 at 5:13 pm #46825NotSoFastMemberThanks Chris – brilliant.
April 5, 2008 at 5:29 pm #46826Chris CoyierKeymasterSomeone 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.