Unordered List Issue in IE…Looks fine in Version 8

[Reed.Culver]

OK first off I want to say this is my first webpage, and this site was the best source of info for me by faaaaaar.
Boss Lady put me in charge of the website, and I had to learn by baptism by fire. I do have a degree in Computer Graphics and Animation, I love criticism good or bad, so dont go light on me…. but I could really use some insight on whats going on here.

I have an issue regarding my Nav and IE 7…

IE7
[img]http://img215.imageshack.us/img215/8046/ie7a.jpg[/img]

How it looks in every other browser even IE 8 (PERFECTO)
[img]http://img101.imageshack.us/img101/7727/workingnav.jpg[/img]

This is the HTML

Code:

• Home
• News
• Events
• Staff
• Gallery

My CSS

Code:

div#page-wrap {
width: 600px;
margin-right: auto;
margin-left: auto;

}

ul#nav {
height: 150px;
list-style: none;
padding-left: 30px;
margin-bottom: 5px;
background-image: url(images/design/header.jpg);
background-repeat: no-repeat;

}

ul#nav li a {
display: block;
width: 50px;
float: right;
margin-top: 130px;
margin-right: 50px;
padding-left: 5px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

ul#nav li a:hover, ul#nav li a:active {
color: #ff7400;
}

If anyone could help me, I would be indebt to you for life!

[dcp3450]

Always fun getting thrown under the bus.

First, you want "home" to be the first link. This is more industry standard here.

remove the display: block; create ul#nav li and give it a display: inline; that should work.

[gooflett]

I just wanted to follow up with the comment left by dcp3450. His suggestion is spot on but I wanted to explain the reasoning behind this as I too had difficulty understanding this.

Usually when setting up a navigation it is important to think of the li as the container of your link text. I usually style my li’s before the <a> tag because this will fit inside the li container.

A list can be block or inline

• li {display:block}
• li {display:block}
• li {display:block}

• li {display:inline}• li {display:inline}• li {display:inline}• li {display:inline}

so when doing your styles just go in order like this: ok I want the list to have no margin, I want the li container to display inline and have a list-style-type of none, and I want the link text to be this font and this color.

You were close. Browsers are dumb and read everything as it is written. Some of the browsers are dumber than others (IE) and if you are missing directions it tries its best to think for you.

[dcp3450]

Thanks to gooflett for getting more technical on that. I guess I should have explained the why better. I would suggest going to W3school and check out display. It will go deeper into what gooflett said and you can even play with the attribute.

Great way to explain the concept Goof!

[Author]

Posts