Grow your CSS skills. Land your dream job.

Help with Sprites

  • # June 30, 2008 at 7:47 pm

    Can anyone tell me why my code works in FF but not in ie6 or ie7. Look at the screen shot to see what I mean.

    HTML Code

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt quis nostrud exercitation. Ut labore et dolore magna aliqua. In reprehenderit in voluptate excepteur sint occaecat consectetur adipisicing elit. Eu fugiat nulla pariatur.

    Velit esse cillum dolore ut aliquip ex ea commodo consequat. Duis aute irure dolor excepteur sint occaecat sunt in culpa. Quis nostrud exercitation. Eu fugiat nulla pariatur.


    CSS Code

    Code:
    @charset “utf-8″;
    /* CSS Document */

    *{
    margin:0;
    padding:0;
    }

    .container {
    background-color: #999999;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    }

    ul {
    list-style: none;
    }

    nav li {
    display:inline;
    }

    ul#nav li {
    text-indent: -9999px;
    }

    ul#nav li a {
    display:block;
    height:35px;
    float:left;
    }

    ul#nav li.home a {
    width:186px;
    background-image:url(images/home.jpg);
    background-position: bottom ;
    }

    ul#nav li.tech a {
    width:178px;
    background-image:url(images/tech.jpg);
    background-position: bottom ;
    }

    ul#nav li.blog a {
    width:169px;
    background-image:url(images/blog.jpg);
    background-position: bottom ;
    }

    ul#nav li.video a {
    width:267px;
    background-image:url(images/video.jpg);
    background-position: bottom ;
    }

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

    # July 1, 2008 at 3:12 pm

    Simple typo:

    Code:
    nav li {
    display:inline;
    }

    That should be:

    Code:
    #nav li {
    display:inline;
    }

    Don’t you hate it when that happens? :lol:

    # July 1, 2008 at 7:48 pm
    "daGUY" wrote:
    Simple typo:

    Code:
    nav li {
    display:inline;
    }

    That should be:

    Code:
    #nav li {
    display:inline;
    }

    Don’t you hate it when that happens? :lol:

    Yep! Thank you very much!

    # July 2, 2008 at 5:32 am

    Typos sometimes are hard to find, but since it’s just a typo (leaving out the #) and not something else, the W3C CSS validator can find it. ;)

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