Hi list,

I have an issue in IE6 and I can't find any information about it online.

I have a sub-nav list with a bunch of links and I have a background
image that is set to appear on the links on hover. In IE6, when you
hover over the links all over the images on the page (but not
background images) disappear and they don't reappear under any
circumstances (apart from a refresh of course). The bug seems to occur
if any background property is set on hover e.g.

#sub_nav li a:hover                     { background: no-repeat; }

I am really lost as to why this is happening. Any solutions?

The code for the nav and sub-nav is below.

Thanks,
Blake

<ul id="nav">
        <li class="active">
                <a class="link1" href="#">
                        <span>Link 1</span>
                </a>
        </li>
        <li>
                <a class="link2" href="#">
                        <span>Link 2</span>
                </a>
        </li>
        <li>
                <a class="link3" href="#">
                        <span>Link 3</span>
                </a>
        </li>
        <li>
                <a class="link4" href="#">
                        <span>Link 4</span>
                </a>
        </li>
</ul>
<ul id="sub_nav">
        <li>
                <a href="#">Link 1</a>
        </li>
        <li>
                <a href="#">Link 2</a>
        </li>
        <li>
                <a href="#">Link 3</a>
        </li>
</ul>

#nav                                    { background: #000; float: left; 
list-style: none; width: 990px; }
#nav li                                 { display: inline; float: left; }
#nav li a                               { display: block; float: left; padding: 
 0 36px 0 18px; }
#nav li a span                          { background-position: 0 0; cursor: 
pointer;
display: block; height: 29px; text-indent: -9999px; }

#nav li a:hover                         { color: #f00; }
#nav li a:hover span                    { background-position: 0 -29px; }

#sub_nav                                { float: left; font-size: 11px; 
font-weight: bold;
list-style: none; }
#sub_nav li                             { float: left; }
#sub_nav li a                           { color: #000; display: block; float: 
left; height:
16px; padding: 7px 10px 6px; text-transform: uppercase; }
#sub_nav li a:hover                     { background: #a60018 
url(background.gif)
repeat-x; color: #fff; }
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to