Jump to content

DD don't work in IE 7


unemployment

Recommended Posts

I can't get my dd nav to work in IE7.  On hover it hides behind another part of the site.  I've tried using position relative and z-index's but can't get it to work.

 

<li class="marr">
<dl id="comp_list">
	<dt></dt>
	<dd class="bbs">stuff</dd>
                <dd>stuff</dd>   
</dl>								
</li>

div.nav li dl{
display:none;
    background-color:#1a7eb2;
    left:0;
    margin:0;
    padding:0;
    position:absolute;
    top:34px;
z-index:40;
-moz-box-shadow: 1px 0 5px #858585;
-webkit-box-shadow: 1px 0 5px #858585;
box-shadow: 1px 0 5px #858585;
-moz-border-radius: 0 0 10px 0;
    border-radius:0 0 10px 0;
}
div.nav li:hover dl{
display:block;
}
div.nav li:hover dt{
cursor:pointer;
display: none;
}
div.nav ul li:hover dd{
    display:block;
}
div.nav li dd{
    clear:left;
    color:#FFFFFF;
    margin:0;
    padding:0;
    text-align:left;
border-top:1px solid #2d8ab4;
border-bottom:1px solid #257193;
}
div.nav ul li dl dd a:link, div.nav ul li dl dd a:visited , div.nav ul li dl dd a:hover, div.nav ul li dl dd a:active {
    color:#FFFFFF;
    display:block;
    font:0.9em Arial;
    padding:2px 15px 3px 21px;
white-space: nowrap;
}

Link to comment
Share on other sites

Ah, the pseudo hover class is not supported in IE 7 and lower  (in your case you have li:hover). I assume you got this menu technique from the son of suckerfish?

IF so, a small part of it is using javascript for it IE 7 and lower to mimic the hover effect.

 

Maybe check out the creators of it: http://htmldog.com/articles/suckerfish/

If your not using their technique I recommend you do. It's as far as i know the best technique.

Hope this helps

Link to comment
Share on other sites

Ah, the pseudo hover class is not supported in IE 7 and lower  (in your case you have li:hover). I assume you got this menu technique from the son of suckerfish?

IF so, a small part of it is using javascript for it IE 7 and lower to mimic the hover effect.

 

Maybe check out the creators of it: http://htmldog.com/articles/suckerfish/

If your not using their technique I recommend you do. It's as far as i know the best technique.

Hope this helps

 

The suckerfish method didn't work for me.  It seems that suckerfish just adds a display: block to the li:hover ul which is basically what I already have.  I think I need more advice.

Link to comment
Share on other sites

Well you say that pretty quick it took me days to see exactly what it does.

 

What you could try is apply a strict doctype, but still you need to mimic hover behaviour for IE 6. and maybe even IE 7 if that doesn't work.

And you need to do that with javascript css can't. Since you assume that the suckerfish technique is not able to do what you want. I can't help you really. It uses javascript to mimic the hover. What i would do is look at that javascript and adjust it to your needs. But i don't know crap about javascript as far as reading goes.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.