asked on

Transparency and CSS Drop Down Menus

I am having trouble getting my drop down menus to work in firefox 2.0 and ie7. It works great in ie6. The menus cover up the text and aren't transparent in firefox 2.0 and ie7. In ie6, the transparency shows fine.
Here is my code.

---Style sheet-----
/* Set up the default font and ovrall size to include image */
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:500px;
position:relative;
margin:2em 125px 0 125px;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:88px;
height:1.5em;
font-weight:bold;
color:#888;
border-bottom:8px solid #888;
background:#fff;
padding-left:10px;
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:96px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:86px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter: alpha(opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
opacity:0.6;
opacity: .50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}

-----Here is the html page------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" type="text/css" href="style/drop_variation.css" />
</head>
<body>

<h2>Variations on a drop-down theme</h2>
<h3>17th April 2006 - updated - 10th June 2006</h3>

<div class="menu">

<ul>
<li><a class="drop" href="../menu/index.html">Demos</a>
<table><tr><td>
      <ul>
      <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
      <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
      <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
      <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
      <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
      <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
      <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
      <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
      <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
      </ul>
</td></tr></table>

</li>

<li><a href="../boxes/index.html">Boxes</a>
<table><tr><td>
      <ul>
      <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
      <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
      <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
      <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
      <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
      <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
      <li><a href="circles.html" title="circular links">circular links</a></li>
      </ul>
</td></tr></table>

</li>

<li><a href="../mozilla/index.html">Mozilla</a>
<table><tr><td>
      <ul>
      <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
      <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
      <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
      <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
      <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
      <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
      <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
      </ul>
</td></tr></table>

</li>

<li><a href="../ie/index.html">Explorer</a>
<table><tr><td>
      <ul>
      <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
      <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
      <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
      </ul>
</td></tr></table>
</li>

<li><a href="../opacity/index.html">Opacity</a>
<table><tr><td>
      <ul>
      <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
      <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
      <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
      <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
      </ul>
</td></tr></table>

</li>

</ul>

</div>
<br>
<br>
<br>
<table align="center">
<tr>
<td width="300">
This is data to test
</td>
</tr>
</table>
</body>
</html>

Thanks in advance

ASKER CERTIFIED SOLUTION

jkmyoung

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Deepak Vasudevan

There is a little writeup on FF Transparency over here:

http://www.mandarindesign.com/opacity.html