SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE mouseover Image swap problem

    I'm puzzled on this one. I have a sample navigation menu where the tabs are background images, that I'm trying to swap out on :hover. It is working on Firefox, Safari, Opera, Netscape, and IE7, but not IE 5,5.5, or 6. This has kicked my butt for several hours. Can anybody help? A sample page is here:

    http://pixelmagicdesign.com/working/menuTest.html

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    :hover on works on anchors in IE 6 and below

    You can use a javascript hack for IE that will make this work - search for whatever:hover. Or use a:hover instead - this is the better option if you can make it work.

  3. #3
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried a:hover and that didn't work either

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,
    Quote Originally Posted by PixelPaul View Post
    I tried a:hover and that didn't work either
    a:hover does work in IE6< - If you posted your code for this we could see where abouts the problem was.

  5. #5
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a code snippit for one of the tabs and it's sub menu:

    <ul id="menu">
    <!--Tab 1-->
    <li onmouseover="montre('smenu1');"><a href="#">About Us</a>
    <ul id="smenu1">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Mission</a></li>
    <li><a href="#">History</a></li>
    </ul>
    </li>

    Here is the accompanying CSS:

    #menu {
    width:782px;
    height:48px;
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    background:#cdcb66;
    }

    #menu li {
    margin:0;
    padding:6px 0 0 0;
    width:130px;
    height:24px;
    float:left;
    background:url(../images/tab.gif) 0 0 no-repeat;
    font:bold 13px Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    }

    #menu li:hover, #menu li.active, #menu li.hover {
    background:#4f7ba7 url(../images/tab.gif) 0 -30px no-repeat;
    }

    #menu li a {
    text-decoration:none;
    color:#fff;
    }

    #menu li ul {
    margin:0 1px 0 1px;
    padding:1px 0 0 0;
    width:780px;
    height:17px;
    list-style:none;
    position:absolute;
    top:30px;
    left:0px;
    line-height:normal;
    z-index:0;
    }
    #menu li ul li {
    margin:0;
    padding:0 0 0 32px;
    height:18px;
    width:auto;
    display:inline;
    background:none;
    font:bold 12px Verdana, Arial, Helvetica, sans-serif;
    }

    #menu li ul li:hover, #menu li ul li.hover {
    background:none;
    }


    #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
    position: absolute;
    left: 0;
    }

    A working sample can be found here:
    http://pixelmagicdesign.com/working/menuTest.html

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You are still using the :hover on the li elements

    #menu li:hover, #menu li.active, #menu li.hover {
    To make it work in IE you need to make this something like
    #menu li a:hover, #menu li.active a:hover {


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
  •