Hi. I'm a designer that isn't very experienced in coding etc, so please bear with me.
I'm having in an issue with the superfish menu. In fact several problems. The main issue is that in Opera (the latest version 9.21) the menu's that drop down don't work when I mouse over them. i.e. their colour doesn't change to that which I have specified in the css. In this case from white to red. It works great in IE though. Secondly, in IE there is a small gap between the menu and the table cell below it. i.e the image in the cell below should be touching the menu but there is a 2 or 3 pixel gap. It shows up perfectly in Opera though. And lastly in IE I see errors have been generated. If someone could take a look at this and figure out what the problem is I would be greatly appreciative. This is after all the 1st drop down menu I've actually ever had to construct and I've spent hours trying to get this right now. Below is the html doc and the css. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Daniel Silke - Independent Political Analyst & Keynote Speaker</title> <link rel=stylesheet type="text/css" href="superfish.css" media="screen" TITLE="combined"> <script type="text/JavaScript" src="jquery.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".nav") .superfish({ animation : { opacity:"show",height:"show"} }) .find(">li[ul]") .mouseover(function(){ $("ul", this).bgIframe({opacity:false}); }) .find("a") .focus(function(){ $("ul", $(".nav>li[ul]")).bgIframe({opacity:false}); }); }); </script> </head> <body bgcolor="#000000" link="#FF0000" vlink="#FF0000" alink="#FF0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('images/menu/ south_african_keynotes_r.gif','images/menu/ international_keynotes_r.gif','images/menu/ travel_presentations_r.gif','images/menu/my_column_r.gif','images/menu/ biography_bookings_r.gif')"> <table width="785" height="100%" border="0" align="center" cellpadding="9" cellspacing="0" bgcolor="fcfbf9"> <tr> <td align="center" bgcolor="fcfbf9" class="background"><table width="767" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><img src="images/header.jpg" width="767" height="187" /><br /> <ul class="nav"> <li class="current"> <img src="images/menu/about- daniel_r.gif" name="aboutdaniel" width="96" height="27" border="0" id="aboutdaniel" /> </li> <li class="current"> <a href="south_african_keynotes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sakeynotes1','','images/menu/ south_african_keynotes_r.gif',1)"><img src="images/menu/ south_african_keynotes.gif" name="sakeynotes1" width="150" height="27" border="0" id="sakeynotes1" /></a> <ul> <li> <a href="#">Critical Issues Facing SA in the Future</a> </li> <li> <a href="#">The Next SA President – Scenario Options for the Future</a> </li> <li> <a href="#">South Africa’s Parliament and Political Parties</a> </li> <li> <a href="#">This is the New South Africa</a> </ li> <li> <a href="#">Wake UP South Africa – Chindia is Coming!</a></li> </ul> </li> <li class="current"> <a href="international_keynotes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('internationalkeynotes1','','images/menu/ international_keynotes_r.gif',1)"><img src="images/menu/ international_keynotes.gif" name="internationalkeynotes1" width="144" height="27" border="0" id="internationalkeynotes1" /></a> <ul> <li> <a href="#">Tracking the Future – The Top 10 Trends that will Transform the Globe</a></li> <li> <a href="#">Global Change 2020: Tips, Trends & Predictions for the Future</a></li> <li> <a href="#">Globalization: The Good, the Bad and the Ugly</a></li> <li> <a href="#">The US and the World: The Lone Super-Power or a Super-Power Alone?</a></li> </ul> </li> <li class="current"> <a href="travel_presentations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('travelpresentations1','','images/menu/ travel_presentations_r.gif',1)"><img src="images/menu/ travel_presentations.gif" name="travelpresentations1" width="130" height="27" border="0" id="travelpresentations1" /></a> <ul> <li> <a href="#">Life’s a Cruise! Living the Life of Luxury on a Cruise Ship</a></li> </ul> </li> <li class="current"> <a href="my_column.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mycolumn1','','images/menu/my_column_r.gif', 1)"><img src="images/menu/my_column.gif" name="mycolumn1" width="80" height="27" border="0" id="mycolumn1" /></a> </li> <li class="current"> <a href="biography_bookings.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('biographybookings1','','images/menu/ biography_bookings_r.gif',1)"><img src="images/menu/ biography_bookings.gif" name="biographybookings1" width="167" height="27" border="0" id="biographybookings1" /></a> </li> </ul></td> </tr> <tr> <td height="29" align="center" valign="top" background="images/ reflection.gif" bgcolor="fcfbf9"></td> </tr> <tr> <td align="center" valign="top"><table width="730" height="56" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="413" height="28" align="left" valign="top" background="images/black.gif"><img src="images/titles/about- daniel.gif" alt="About Daniel:" width="125" height="18" /></td> <td width="317" height="28" align="left" valign="top" background="images/black.gif"><img src="images/titles/political- comment.gif" alt="Political Comment:" width="182" height="23" /></td> </tr> <tr> <td width="413" align="left" valign="top"><p class="maintext"><br /> <strong>Daniel Silke is one of South Africa's leading Independent Political Analysts and Keynote Speakers. As a renowned Futurist and commentator, his insightful, entertaining and predictive presentations on topical issues are in great demand. His seminars cover South African, African and Global political and economic issues.</strong></p> <p class="maintext"> Silke holds a Masters Degree in South African and International Politics and has served, in a senior capacity, both as a Member of the Provincial Parliament and as a City Councillor in Cape Town. He regularly appears in print, on the internet and on radio both in South Africa and abroad. His articles and comments on topical issues are widely published and respected. He is in demand, as a keynote speaker across the globe and may be commissioned for presentations and print articles on South African and Global issues.</p> <div class="examples"> <p class="maintext"> click to <a href="#" id="showh1">read more</a> / <a href="#" id="hideh1">hide</ a><br /> <br> </div> <div class="showhide"><p class="maintext">Silke focuses on the study of the effects of Globalization on the world and travels widely addressing international audiences. Global change is occurring at a rapid rate. Looking into the future and identifying the key trends that will affect societies is now a major part of all his presentations. For business, determining these trends is critical in maintaining a competitive edge. His International Keynotes are therefore slick, surprising and stimulating.</p> <p class="maintext"> For South African audiences, the transition to the next stage in our democratic evolution continues. Understanding the trends and pitfalls remains an essential aspect of growing and thriving in the new era. Facing up to the critical political, social and economic issues that will shape the future of the country is a key aspect of any keynote speech.</p> <p class="maintext">Silke also specialises in presentations for large corporations, conventions and educational institutions. He is also a regular participant at Universities and Think-Tanks globally and is contracted as an enrichment lecturer on cruise ships world-wide. He is the Director of the Silke Seminar Series that offers audiences unique, fast-paced and expertly illustrated keynotes on topical International Relations issues.</p> </div> <script> // basic show and hide $(document).ready(function() { $('.showhide,h1').hide(); $('a#hideh1').click( function() { $('.showhide,h1').hide("slow"); return false; }); $('#showh1').click( function() { $('.showhide,h1').show("slow"); return false; }); }); </script> </td> <td width="317" align="left" valign="top"><p class="maintext"><br /> <img src="images/spacer.gif" width="16" height="220" align="left" /><strong><font color="#D90000">Need comment or analysis on a topical news event? Contact Daniel Silke now for unbiased and concise political comments for all your media needs.</font></strong></ p> <p class="maintext">Quotes for print, radio & television may be obtained by calling Daniel at <strong><font color="D90000">+27 82 554 8538</font></strong> (South Africa) or emailing at ... Daniel is also available for talk, phone-in and TV appearences.</p></td> </tr> </table> <p><img src="images/quotes/qu01.gif" width="681" height="106" /></p></td> </tr> </table> <p><img src="images/footerlogo.gif" width="35" height="43" /></p></ td> </tr> <tr> <td align="center" valign="bottom"><table width="731" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#FFFFFF"> <td height="28" align="center" valign="middle" background="images/black.gif" bgcolor="fcfbf9"><p class="list"><font color="#D90000">About Daniel</font> <font color="#333333"> | South African Keynotes | International Keynotes | Travel Presentations | My Column | Biography and Bookings</font><br /> </p></td> </tr> <tr> <td align="right" valign="middle" bgcolor="fcfbf9"><p class="list">website created by <a href="mailto:[EMAIL PROTECTED]"> jason walter</a> <a href="mailto:[EMAIL PROTECTED]"><img src="images/super.gif" width="16" height="18" vspace="6" border="0" align="absmiddle" /></a></ p> </td> </tr> </table></td> </tr> </table> </body> </html> CSS: a:link {color: #D90000; text-decoration: none} a:visited {color: #3C5B91; text-decoration: none} a:hover {color: #D90000; text-decoration: underline} a:active {color: #3C5B91; text-decoration: none} .maintext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; padding-right: 24px; } .background { background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: center 96px; } .list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } /*menu*/ .nav, .nav *{ margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF !important; line-height: 22px; text-align: left; } .nav { float:left; } .nav ul { background:#000000; /*IE6 needs this*/ } .nav li { float:left; list-style:none; position:relative; z-index:999; } .nav a { color: #FFFFFF; display:block; text-decoration:none !important; } .nav li ul { float:none; top:-999em; position:absolute; } .nav li:hover, .nav li.sfHover, .nav a:focus, .nav a:hover, { color:#D90000 !important; } .nav li:hover ul, /* pure CSS hover is removed below */ ul.nav li.sfHover ul { left:0px; top:27px; } .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; } .nav li li:hover ul, /* pure CSS hover is removed below */ ul.nav li li.sfHover ul { left:25em; top:-1px; width:25em; } /*following rule negates pure CSS hovers so submenu remains hidden and JS controls when and how it appears*/ .superfish li:hover ul, .superfish li li:hover ul { top:-999em; } .nav li li { background:#000000; float:none; width:25em; border-top:1px solid #444444; } .nav li li li { background:#9AAEDB; } .nav li li a { float:none; padding-right:0; width:25em; margin-left: 5px; margin-bottom: 0px; } /* quick hacks for IE */ *html .nav li li { margin-bottom:-3px; } *html .nav li li li { margin-bottom:-1px; } *+html .nav li li { margin-bottom:-3px; } *+html .nav li li li { margin-bottom:-px; }
