Grow your CSS skills. Land your dream job.

Unordered List Issue in IE…Looks fine in Version 8

  • # October 29, 2009 at 6:44 pm

    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

    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!

    # October 29, 2009 at 8:28 pm

    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.

    # October 30, 2009 at 10:56 am

    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.

    # October 30, 2009 at 11:39 am

    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!

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".