Avatar of ntiguy
ntiguy 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<!--[if IE 7]><!--></a><!--<![endif]-->
<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>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../boxes/index.html">Boxes<!--[if IE 7]><!--></a><!--<![endif]-->
<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>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../mozilla/index.html">Mozilla<!--[if IE 7]><!--></a><!--<![endif]-->
<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>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../ie/index.html">Explorer<!--[if IE 7]><!--></a><!--<![endif]-->
<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><!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../opacity/index.html">Opacity<!--[if IE 7]><!--></a><!--<![endif]-->
<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>
<!--[if lte IE 6]></a><![endif]-->
</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
Web Languages and StandardsCSSHTML

Avatar of undefined
Last Comment
Deepak Vasudevan

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
jkmyoung

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Deepak Vasudevan

There is a little writeup on FF Transparency over here:

http://www.mandarindesign.com/opacity.html
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes