At the moment I am in the middle of designing a blog template, but I've ran into a problem and cannot continue until this problem is solved. Problem: My drop down menu is not working properly in internet explorer and firefox, BUT works fine in Chrome and Opera. Check it out yourself... Template Link( hover over top buttons ): click here Style sheet: Click here The testing page for the drop down: <link href="stylesheet.css" rel="stylesheet"> <style type="text/css"> .nd_wrap{ width:1000px; height:auto; } .ndtut{ position:relative; width:200px; height:auto; padding-top:5px; padding-left:10px; padding-right:10px; padding-bottom:5px; z-index:2; background:url(images/qnbg.jpg); text-align:left; float:right; } </style> <script language="JavaScript"> function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } </script> <a class="ntut" href="#" on onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');" ></a> <div class="nd_wrap"> <div id="drop1" class="ndtut" onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');"> <div>link1</div> <div>link1</div> <div>link1</div> </div> </div> <!--onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');"--> HTML: So forum, how can I make this work in both internet explorer and firefox?
Personally I would only use Position: relative; on the dropdowns. However a quick fix could be .ndtut{ position:fixed; width:200px; height:auto; padding-top:5px; padding-left:10px; padding-right:10px; padding-bottom:5px; z-index:3; background:url(images/qnbg.jpg); text-align:left; margin-left:-120px; margin-top:50px; display: none; } Bold for right value for FF. You then can use conditional comments for IE and FF NB. I have taken ndtut as an example
Problem solved I used you code + <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie_only.css" media="all" /> <![endif]--> HTML: