Grow your CSS skills. Land your dream job.

IE 6 doen’t show nav (center top/bottom) correctly [SOLVED]

  • # September 8, 2008 at 10:25 am

    Hey there,

    I followed exactly the video tutorial "Converting a Photoshop Mockup: Part Two, Episode Two".
    I have a problem with IE 6 not displaying the navigation properly. In FF and Safari it works.

    IE 6 only displays the hover part.
    Can someone take a look? I’ve tried a lot of different things. e.g. making 2 image instead of 1 (didn’t work in IE).

    site: http://stefanbrauchli.com/version2

    CSS:

    Code:
    ul#nav {
    float: right;
    padding-right: 60px;
    padding-top:27px;
    }
    ul#nav li {
    display:inline;
    }
    ul#nav li a {
    display:block;
    height:9px;
    text-indent:-9999px;
    overflow: hidden;
    }
    ul#nav li.portfolio a {
    background:transparent url(images/portfolio.jpg) no-repeat scroll center bottom;
    float:left;
    width:79px;
    }

    Code:
    ul#nav .selected {
    background-position:center top !important;
    }

    ul#nav li a:hover {
    background-position:center top;
    }

    HTML (PHP):

    Thanks

    # September 9, 2008 at 7:24 am

    Nobody replied, meanwhile I’ve found the solution:

    Code:
    ul#nav li.portfolio a {
    background:transparent url(images/portfolio.jpg) no-repeat scroll 0px -9px;
    float:left;
    width:79px;

    Use 0px -9px (where 0px -9px is up to you to adjust // the first one (0px) is the horizontal axis and the second (-9px) is the vertical).

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".