drop downs / IE vs FF

[wfinley]

Hi all - I was pointed to this forum from a user at the CrystalTech forums. This is only my 2nd post (to alleviate guilt I had to reply at least once before requesting) so I'm a total newbie!

I have a question about drop downs / IE / FF & CSS. I've created drop downs and have them running here: http://67.199.35.190/

They look perfect in IE, alright in FF for Windows and dreadful in FF for Mac. The problem has to do with spacing in between the img and the drop down. See below.

http://67.199.35.190/layout_mhtrust/images/picture%204.png
FF 3 Mac OSX

http://67.199.35.190/layout_mhtrust/images/picture%203.png
IE 7 XP


The nav bar images are set up as inline UL / LI (standard hack of drop downs) and the actual links are hrefs in a div.

What positioning or margin (clip or whatever) would I call to force the drop downs to move back up to where they're touching the img they're related to?





Should you really care the actual code is below.


The nav bar img code

<div class="chromestyle" id="chromemenu"><ul>
<li ><a rel="dropmenu1" href="index.cfm?section=about-us" ><img name="link_about" src="/layout_mhtrust/images/link_about.gif></a></li>


The drop down code:

<div id="dropmenu1" class="dropmenudiv">
<cfoutput query="dropmenu1">
<a href="index.cfm?section=About-Us&page=#REreplace(cats_categoryname," ","-","all")#">#cats_categoryname#</a>
</cfoutput>
</div>

The CSS:

/* ######### Style for Drop Down Menu MAIN ######### */

.chromestyle {

font-weight: bold;
}
.chromestyle:after { /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul {
width: 636px;
padding: 0px;
margin: 0px;
text-align: center; /*set value to "left", "center", or "right"*/
margin-top: 0px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: 0px;
}
.chromestyle ul li {
display: inline;
}
.chromestyle ul li a {
padding: 0px;
text-decoration: none;
margin: -2px;
}
/* ######### Style for Drop Down Menu ######### */

.dropmenudiv {
position:absolute;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
background-color: white;
visibility: hidden;

}
.dropmenudiv a {
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #fff;
text-decoration: none;
color: #fff;
background-color: #b59668;
padding-top: 4px;
padding-right: 12px;
padding-bottom: 4px;
padding-left: 4px;
}
* html .dropmenudiv a { /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover { /*THEME CHANGE HERE*/
background-color: #996633;
}

[inn8]

I've never used this script before, what browsers does it support? The reason I ask is I checked out the site on the IP you gave, and the dropdowns don't work in IE6. That is not a deal breaker..but there are still a lot of people using it. Also ideally you'd have something that degrades gracefully should a user not have javascript turned on in his browser. There are some pure CSS dropdowns on the net right now you might want to check out.

[wfinley]

It supports IE6 but I didn't like the way they looked so I turned them off; they're only working in IE7, FF and Safari.

I'll eventually fix the display in IE6; but FF is more pressing.