SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 list elements not working!

    Hi Guys,

    http://firstserver1.net/davew/checkit/

    On testing the above site I've found that my nav buttons are not working in IE6 but are fine in IE7 and FireFox (actually I've just discovered that the rollovers work, but the links are not active).

    It's like IE6 (and possibly IE7 & FF is not seeing the list items as anchor tags.

    Could anyone help me please.

    CSS for the nav:

    #mainnav {
    width: 860px;
    height: 140px;
    float: left;
    background-image: url(../assets/main_logo.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #022262;
    }

    #mainnav ul {
    display: block;
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #mainnav li {
    float: right;
    line-height: 140px;
    width: 117px;
    margin-left: 2px;
    text-indent: -5000px;
    }

    li.navwhat {background-image: url(../assets/button_what.jpg); background-repeat: no-repeat; background-position: left top;}
    li.navwhat:hover {background-image: url(../assets/button_what.jpg); background-repeat: no-repeat; background-position: -117px top;}

    li.navhow {background-image: url(../assets/button_how.jpg); background-repeat: no-repeat; background-position: left top;}
    li.navhow:hover {background-image: url(../assets/button_how.jpg); background-repeat: no-repeat; background-position: -117px top;}

    li.navnext {background-image: url(../assets/button_next.jpg); background-repeat: no-repeat; background-position: left top;}
    li.navnext:hover {background-image: url(../assets/button_next.jpg); background-repeat: no-repeat; background-position: -117px top;}

    li.navwho {background-image: url(../assets/button_who.jpg); background-repeat: no-repeat; background-position: left top;}
    li.navwho:hover {background-image: url(../assets/button_who.jpg); background-repeat: no-repeat; background-position: -117px top;}

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,751
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I6 doesn't like it when you use :hover on non-anchor elements. Best to have anchors inside the <li>'s, then use :hover on those.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fixed it a bit

    Hi,

    managed to get IE6 to recognise the anchors, but the rollover won't work.

    I have just one image for the button and the hover state moves the image 117 px to the left. Works in IE7 & FF.

    Any ideas?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed it, thanks!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •