Hi all - I am trying use Suckerfish to create a menu in Joomla that uses images for the top level links.

As you would expect it works fine in FF and IE7 but for some reason I cannot get the dropdowns to appear in IE6. I have tried so many different things at this point including whatever hover and I am very confused by what is happening. Last night I actually commented out all of the IE6 specific CSS and it did nothing.

At this point I feel like I'm kind of going in cirlces and I'm getting a little frustrated about spending so much time on something that I've gotten to work on other sites (just without the links images).

If anyone can help me out or point me in a direction that I haven't tried or find that piece of code that will label me as this weeks stupid question poster I would really appreciate knowing where I am going wrong here.

You can reach the site at http://www.justinoc.com:81/starpi

either I posted a really stupid question or a really hard one

You really need to have just a tad more patience for answers - some of us work for a living and can't hang out here 24/7.

I'm afraid I can't get to your site from here -- blocked by our IT weenies
Either post the code, or wait for someone else to take a look.

lol. Yeah I know. It's just that I've posted this on so many forums in the last 3 days and gotten no response from anyone that I'm starting to get very frustrated. I've made this stuff work without the images so I'm really a bit baffled as to why it won't work with them in IE6 when the others are fine.

Here is my (at this point hideous) CSS code. nav2 is the class and id for the navigation. As I said, I've commented out most of the IE6 styles. IF you want them back please let me know. Also, do you need the .php code for the index?

Thank you so much for responding

.active a span{
color:#8DAEFA;
font-weight:bold;
text-decoration:none;
}
.active a span:hover{
color:#fff;
text-decoration:underline;
}
.separator span{
padding-left:10px;
padding-right:10px;
}
.menu a{
padding-left:0px;
padding-right:0px;}

#nav2{
padding: 0;
margin:0;
list-style: none;
line-height: 1%;
padding-left:0px;
padding-top:0px;
display:block;
}
* html #nav2{
left:0px;
width:100%;
padding: 0;
margin:0;
margin-left:0px;
list-style: none;
line-height: 20px;
white-space:nowrap;
display:block;
}

* + html #nav2{
padding: 0;
margin:0;
margin-left:-10px;
list-style: none;
line-height: 20px;
}
* html .menu li a span{
display:none;}

#nav2 ul {
padding:0;
margin:0;
list-style: none;
line-height: 1%;
display:block;}

* + html #nav2 ul {
padding: 0;
margin:0;
list-style: none;
line-height: 1%;
margin-left:-10px;

}
* + html #nav2, * + html #nav2 ul {
margin: 0;
padding-left: 0px;
}
#nav2 ul li a{
color:#fff;
font-weight:bold;
text-decoration:none;
}
#nav2 ul li a:hover{
color:#8DAEFA;
text-decoration:underline;}

#nav2 ul li a>img + span {
display: none;
}
#nav2 a {
display: block;
background-color:;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 0px;
}
#nav2 a, #nav2 a:visited, #nav2 a:hover {
color: #d7d7d7;
text-decoration: none;
}

#nav2 li {
float: left;
padding: 0px;
vertical-align:top;
}
#nav2 li ul {
margin: 0;
margin-top:-4px;
padding: 0;
position: absolute;
width: 200px;
left: -999em;
background-color: #000000;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
border-left:1px solid #000000;
margin-left:0px;
}
* html #nav2 li ul {
margin: 0;
margin-top:2px;
padding: 0;
position: absolute;
width: 200px;
left: -999em;
background-color: #000000;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
border-left:1px solid #000000;

}

* html #nav2 ul li a img:hover {
left: 1em;
}

* + html #nav2 li ul{
margin-left:0px;
top:98px;
}
#nav2 li ul a {
margin: 0;
padding: 0;
padding-left: 0px;
width: 180px;
font-size: 13px;
font-weight: bold;
text-align: left;
background-color: #000000;
color:#d7d7d7;
line-height: 20px;
vertical-align: middle;
display:block;
}

#nav2 li ul li a:hover{
background-color: #000000;
color:#8DAEFA;
text-decoration:underline;}

* + html #nav2 li ul li a:hover{
background-color:#000000;
color:#8DAEFA;
text-decoration:underline;}
#nav2 ul li ul li{
margin-left:5px;
}
#nav2 ul li .separator {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: left;
background-color: #000000;
color:#FFFFFF;
cursor:default;
}
#nav2 ul li ul li .separator:hover{
background-color:#000000;
color:#8DAEFA;
width:200px;
}
* html #nav2 ul li ul li .separator :hover{
background-color:#000000;
color:#8DAEFA;
width:200px;
}
* + html #nav2 ul li ul li .separator :hover{
background-color:#000000;
color:#8DAEFA;
width:200px;
}
#nav2 ul li ul li ul {
background-color:#000000;
}
#nav2 ul li ul li ul li{
width: 180px;
left: -999em;
color:#ffffff;
background-color: #000000;
margin:0px;
padding-right:0px;
margin-left:0px;
}
#nav2 ul li ul li ul li a{
width: 180px;
left: -999em;
color:#ffffff;
background-color: #000000;
}
* html #nav2 ul li ul li ul li {
margin-top:32px;
}
* + html #nav2 ul li ul li ul li{
top:32px;
}
*html #nav2 ul li ul li ul li a{
top:60px;
}

* + html #nav2 ul li ul li ul li a{
top:0px;
}
#nav2 li ul a:hover {
color:#dddddd;
text-decoration: underline;

}
*html #nav2 li ul:hover{
left: 0px;
}
#nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li.iehover ul ul, #nav2 li.iehover ul ul ul {
left: -999em;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.iehover ul, #nav2 li li.iehover ul, #nav2 li li li.iehover ul {
left: auto;
}
* html li:hover ul{
left: 0px;}


P.S. I'm actually working on becoming an IT weenie (MCSE,CCNA) because IE6 drives me nuts

Enlighten me.. what is this supposed to mean ?
* + html #nav2

I have never seen a + in a css selector ...

it is actually the equivilent of IE6's * html for IE7.

Why do you need that ?? IE7 has no trouble with the type of positioning needed for Suckerfish menus, and it shouldn't need a hack to replace the *html hack.

I probably shouldn't be telling you this, but you don't need anything like * + html to target IE7. All you need to do is place a * before any statement, like this:

#wrapper {
*margin-left: -9999px; /*haha, we'll make the whole wrapper disappear in IE7 and below! Freakin' awesome!*/
}

I'm not sure I understand why ANY hack is needed for this application. IE7 isn't perfect, but it's miles better standards-wise than it's predecessors. For the most part, if it's right in Firefox, it's going to be right in IE7 (with a few exceptions).

using * + targets only IE7, not IE7 and below.

When using Suckerfish,IE7 and Joomla I've found I sometimes have to do some funky things to get the results I want. I'm personally of the mind of whatever works, works, no matter how ugly. It's kind of the like the difference between the way the British get their guitar sound and the way Americans get their guitar sound. U.K. guitarists are more likely to throw whatever they have at it to make it sound good, Americans will plug into a Marshall or Mesa/Boogie stack and hope that sounds as good as it looks. (I'm an American but my guitar sound is processed and creamy). Anyhow, as my music metaphors are usually lost on everyone but me, any thoughts on why link images are not working IE6?

Originally Posted by LadynRed

I'm not sure I understand why ANY hack is needed for this application. IE7 isn't perfect, but it's miles better standards-wise than it's predecessors. For the most part, if it's right in Firefox, it's going to be right in IE7 (with a few exceptions).

I agree 10000% that IE7 is miles beyond IE6 but I sometimes run into problems when I'm building Joomla sites where IE7 just doesn't behave. It isn't misbehaving the way it's older brother is but it still isn't quite as "pleasant" as it could be. It's those few exceptions that give me trouble.

I suspect that has more to do with Joomla and the template coding than with the base coding needed for the dropdown menus to work .

IE6 doesn't support the hover pseudo class w/o forcing it with javascript.