7 Replies - 2750 Views - Last Post: 23 August 2011 - 04:45 AM

#1 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 22 August 2011 - 05:56 AM

This is my first post so bear with me and do ask if you need any further info.

I am putting a search page together and have taken the css and HTML from our current Intranet Intranet site. It is working fine IE 7, 8 and Firefox 6 for the Intranet site but not for our Google Mini Search where I have added the CSS and HTML to the header file. The drop down menus do not work in the mini. I thought there may be an issue with some Javascript was not working but this does not appear to be the case as I disabled Javascript for these browsers when looking at the Intranet site. The dropdowns work fine regardless. In addition the dropdowns work fine in IE5 and 6 for the Google Mini.
Here is a copy of some of the code:
    <html><head>
    <meta name="robots" content="NOINDEX,NOFOLLOW">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <title>Search Home</title><style>
      <!--
    body,td,div,.p,a,.d,.s{font-family:Verdana,Arial,Helvetica,sans-serif}
    body,td,div,.p,a,.d{font-size: }
    body,div,td,.p,.s{color:#000000}
    body,.d,.p,.s{background-color:#ffffff}
    .s{font-size: 80%}
    .g{margin-top: 1em; margin-bottom: 1em}
    .s td{width:34em}
    .l{font-size: }
    .l{color: #0000cc}
    a:link,.w,.w a:link{color:#0000cc}
    .f,.f:link,.f a:link{color:#7777cc}
    a:visited,.f a:visited{color:#551a8b}
    a:active,.f a:active{color:#ff0000}
    .t{color:#000000}
    .t{background-color:#e5ecf9}
    .z{display:none}
    .i,.i:link{color:#a90a08}
    .a,.a:link{color:#008000}
    div.n {margin-top: 1ex}
    .n a{font-size: 10pt; color:#000000}
    .n .i{font-size: 10pt; font-weight:bold}
    .q a:visited,.q a:link,.q a:active,.q {color:#0000cc;}
    .b,.b a{font-size: 12pt; color:#0000cc; font-weight:bold}
    .d{margin-right:1em; margin-left:1em;}
    div.oneboxResults {max-height:150px;overflow:hidden;}
    --></style></head>
       <body dir="ltr">
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
          <head>
    
          <title>Search</title>
          <meta name="robots" content="nofollow" />
          <meta http-equiv="ContentType" content="text/html; charset=UTF-8" />
          <link href="http://boris.bracknell-forest.gov.uk/boris.css" rel="stylesheet" type="text/css" />
          
          <script type="text/javascript" src="http://boris.bracknell-forest.gov.uk/js/domcollapse.js"></script>
          <script type="text/javascript" src="http://boris.bracknell-forest.gov.uk/js/collapse.js"></script>
          <script type="text/javascript" src="http://boris.bracknell-forest.gov.uk/js/ajaxtabs.js"></script>
    
          <script type="text/javascript" src="http://boris.bracknell-forest.gov.uk/js/tabcontent.js">
          /***********************************************
          * Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
          * This notice MUST stay intact for legal use
          * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
          ***********************************************/
          </script>
           
           <link rel="SHORTCUT ICON" href="http://boris.bracknell-forest.gov.uk/favicon.ico" />
           
           <link href="http://bfwebsearch.bracknell-forest.gov.uk/ultraseek/look/kbroker.css" rel="stylesheet" type="text/css" />
           
           	
           	<!--********************************* NEW CSS ******************************************-->
           
           	<style type="text/css">
           
           	.blueGrad {
           	  height: 6px;
           	  font-size: 4px;
           	  background-image: url('');
           	}
           
           	#appPicker {
           	  background-color: #f2f8fa;
           	  width: 208px;
           	}
           	#jobsIntFeed ul {
           	  list-style-type: disc;
           	  list-style-position: inside;
           	  font-size: 0.7em;
           	}
           	#jobsExtFeed ul {
           	  color: #1170aa;
           	  list-style-type: disc;
           	  list-style-position: inside;
           	}
           
           	#TopStrip {
           	  height: 21px;
           	  background-color: #FFFFFF;
           	}
           	.dateRight {
           	  padding-top: 0px;
           	  padding-bottom: 0px;
           	}
           	#topWeather {
           	  float: right;
           	  line-height: 25px;
           	}
           	#topWeather img {
           	  float: left;
           	  margin-right: 5px;
           	}
      	#topWeather p {
      	  padding-top: 2px;
      	  padding-bottom: 0px;
      	  font-family: Arial, Helvetica;
      	  font-size: 0.7em;
      	}
      	#topWeather a {
      	  font-size: 1.0em;
      	}
      	#topWeather br {
      	  display: none;
      	}
      	#TopStripNav {
      	  float: left;
      	  font-size: 0.8em;
      	}
      	#TopStripNav ul, #TopStripNav li {
      	  display: inline;
      	  line-height: 25px;
      	}
      
      	#TopBanner {
      	  position: relative;
      	  height: 90px;
      	  background-color: #007894;
      	  background-image: url(http://boris.bracknell-forest.gov.uk/NEW-BORIS-top-banner.gif);
      	  background-repeat: no-repeat;
      	  background-position: right;
      	  margin-bottom: 1px;
      	}
      	#TopBORISLogo {
      	  position: absolute;
      	  bottom: 8px;
      	  left: 7px;
      	}
      	#searchArea {
      	  position: absolute;
      	  float: left;
      	  width: 100%;
      	  text-align: center;
      	  bottom: 8px;
      	}
      	#frmSearch {
      	  float: none;
      	  margin: auto;
      	  text-align: left;
      	  width: 41%;
      	  font-family: Arial, Helvetica;
      	  font-size: 0.8em;
      	  color: #FFFFFF;
      	}
      
      	#rightCol .searchContacts .tabList {
      	  margin-bottom: -1px;
      	}
      	#rightCol .searchContacts .ContentBox {
      	  /*border-top: 0px;*/
      	  margin-top: 0px;
      	}
      
      	</style>
      	
      
      
      <style type="text/css">
      	
      	
      #pad {height:140px;}
      #menu {padding:0; margin:0; list-style:none; height:20px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;
      width:100%; background-color:#66AEBF;}
      #menu li {float:left; border-right:1px solid white;display:block;}
      #menu li a {display:block; float:left; height:20px; line-height:20px; background:#66AEBF; color:#FFFFFF; text-decoration:none;
      font-size:11px; font-weight:bold; padding:0 30px 0 20px;}
      
      
      #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
      
      /* Default link styling */
      
      /* Style the list OR link hover. Depends on which browser is used */
      
      #menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#66AEBF;}
      #menu li:hover {position:relative; z-index:200;}
      
      #menu li:hover > a {color:#fff; background:#c60;}
      #menu li:hover > a.sub {color:#fff; background-color:#c60;}
      
      #menu li.current a {color:#fff; background:#66AEBF;}
      
      #menu li a.sub {background: #66AEBF url(http://boris.bracknell-forest.gov.uk/down-arrow-menu.gif) no-repeat right center;}
      #menu li.current a.sub {color:#fff; background:#66AEBF url(http://boris.bracknell-forest.gov.uk/down-arrow-menu.gif) no-repeat
      right center;;}
      
      #menu :hover ul {left:0; top:20px; width:120px; background:#c60;}
      
      
      #menu :hover ul :hover ul
      {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
      
      
      /* keep the 'next' level invisible by placing it off screen. */
      #menu ul, 
      #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
      
      
      
      
      #menu :hover ul li {margin:0; border-top:1px solid #66AEBF;}
      #menu :hover ul li a {width:300px; padding:0; text-indent:10px; background:#66AEBF; color:#fff; height:20px; line-height:20px;}
      #menu :hover ul li a.fly {background:#66AEBF url(http://boris.bracknell-forest.gov.uk/right-arrow.gif) no-repeat right center;}
      
      #menu :hover ul :hover {background-color:#007B94; color:#fff;}
      #menu :hover ul :hover a.fly {background-color:#007B94; color:#fff;}
      
      #menu :hover ul li.currentsub a {background:#007B94 color:#fff;}
      #menu :hover ul li.currentsub a.fly {background:#007B94 url(right-arrow.gif) no-repeat right center; color:#fff;}
      
      #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#fff;}
      #menu :hover ul :hover ul :hover {background-color:#007B94; color:#fff;}
      
      #menu :hover ul :hover ul li.currentfly a,
      #menu :hover ul :hover ul li.currentfly a:hover {background:#007B94; color:#fff;}
      
      </style>
      
      
      
      </head>

      <body>
      <a name="top"></a>
      
      <!-- Start Outer div to hold blue border line background -->
      <div id="outer">
      
      <!-- Start wrapper to hold layout -->
      <div id="wrapper">
      
      	<!--********************* NEW TOP STRIP *************************** -->
      
      			<div id="TopStrip">
      				<ul id="TopStripNav">

      
      				  <li><a href="http://boris.bracknell-forest.gov.uk/boris-help/search-boris-help.htm">Help</a> |</li>
      				</ul>
      	<!-- ********************NEW WEATHER DIV *********************** -->
      			
      	<!-- ******************** END NEW WEATHER DIV *********************** -->
      			</div>
      			
      			<div class="clear"></div>
      
      			<div id="TopBanner">

      
      				<img id="TopBORISLogo" src="http://boris.bracknell-forest.gov.uk/logoBORIS-large.gif" />
      
      			</div>
      			
      			
      		<!-- main nav bar -->	
      		<!--<div id="mainNav">
      				<ul style="position:absolute">
      					<li id="btop1"><a href="http://boris.bracknell-forest.gov.uk/chief-executives-office.htm" title="Chief Executive's Office">Chief
      Executive's Office</a></li>
      					<li id="btop2"><a href="http://boris.bracknell-forest.gov.uk/corporate-services.htm" title="Corporate Services">Corporate
      Services</a></li>
      					<li id="btop3"><a href="http://boris.bracknell-forest.gov.uk/environment-culture-and-communities.htm" title="Environment,
      Culture and Communities">Environment, Culture and Communities</a></li>
      					<li id="btop4"><a href="http://boris.bracknell-forest.gov.uk/social-care-and-learning.htm" title="Social Care and Learning">Social
      Care and Learning</a></li>
      				</ul>
      		</div>-->
      
      		<ul id="menu" >
      	<li><a href="http://boris.bracknell-forest.gov.uk/index.htm"><b>Home</b></a></li>
      	<li><a class="sub" href="#"><b>Departments</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      
      	<!--[if lte IE 6]><table><tr><td><![endif]-->

      		<ul class="sub1">
      			<li><a class="#url" href="http://boris.bracknell-forest.gov.uk/adult-social-care-and-health.htm">Adult Social Care &amp;
      Health</a>
      	
      		<li><a href="http://boris.bracknell-forest.gov.uk/chief-executives-office.htm">Chief Executive’s Office</a></li>
      			<li><a href="http://boris.bracknell-forest.gov.uk/children-young-people-and-learning.htm">Children, Young People & Learning</a></li>
      
      				<li><a href="http://boris.bracknell-forest.gov.uk/corporate-services.htm">Corporate Services</a></li>

      				<li><a href="http://boris.bracknell-forest.gov.uk/environment-culture-and-communities.htm">Environment, Culture and Communities</a></li>
      
      
      
      			
      		</ul>
      	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
      	</li>
      	<li><a class="sub" href="#"><b>Online Resources</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      
      	
      
      	
      		
      
      		<!--[if lte IE 6]><table><tr><td><![endif]-->
      		<!-- NAVIGATION ELEMENTS SECTION FOR  ONLINE RESOURCES -->
      		<ul class="sub2">

      		<li><a href="http://bfagrwebapplive/agresso/system/1201.asp" title="Agresso Web">Agresso Web</a></li>
      <li><a href="http://www.banner-online.biz/b-default.asp" title="Banner">Banner</a></li>
      <li><a href="http://democraticintranet.bracknell-forest.gov.uk/uuCoverPage.aspx?bcr=1&AspxAutoDetectCookieSupport=1" title="http://democraticintranet.bracknell-forest.gov.uk/uuCoverPage.aspx?bcr=1&AspxAutoDetectCookieSupport=1">Council,
      Government &amp; Democracy</a></li>
      <li><a href="http://www.bracknell-forest.gov.uk/pubuserhome.htm" title="www.bracknell-forest.gov.uk/pubuserhome.htm">Events
      Directory</a></li>
      
      <li><a href="/environment-culture-and-communities/ecc-performance-and-resources/environment-culture-and-communties-business-systems/gis/gis-live.htm"
      title="GIS Live">GIS Live</a></li>

      <li><a href="http://fs_gwwebacc.bracknell-forest.gov.uk/gw/webacc" title="fs_gwwebacc.bracknell-forest.gov.uk/gw/webacc">Groupwise
      WebAccess</a></li>
      <li><a href="/servicedesk" title="">ICT Helpdesk Online</a></li>
      <li><a href="http://bracknell.thirdlight.com/authenticate.tlx?username=3a4c075a16dbbb39cfe9215c7a69167f&password=3a4c075a16dbbb39cfe9215c7a69167f"
      title="Image Library">Image Library</a></li>
      <li><a href="https://my.bracknell-forest.gov.uk/LocalView/LocationDetails.aspx" title="Find a Map on LocalView">LocalView</a></li>
      <li><a href="http://bracknell-hip.epixtech.co.uk/ipac20/ipac.jsp?profile=bbra#focus" title="bracknell-hip.epixtech.co.uk/ipac20/ipac.jsp">Library
      Portal (Horizon)</a></li>
      <li><a href="new-employee-information" title="New Employee Information">New Employee Information</a></li>

      <li><a href="https://www.e-paycapita.com/WebAccessControl/index.jsp" title="www.e-paycapita.com/WebAccessControl/index.jsp">Online
      Payments</a></li>
      
      <li><a href="http://www.idea.gov.uk/idk/core/page.do?pageId=5221549" title="www.idea.gov.uk/idk/core/page.do">Ashridge VLRC</a>
      </li>
      
      <li><a href="http://cms.bracknell-forest.gov.uk/spae/GWCBT/" title="cms.bracknell-forest.gov.uk/spae/GWCBT/">Groupwise training</a>
      </li>
      <li><a href="http://www.improvementnetwork.gov.uk/imp/core/page.do?pageId=1" title="www.improvementnetwork.gov.uk/imp/core/page.do">Improvement
      Network</a></li>			
      		</ul>

      			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
      	</li>
      	
      	<li><a href="http://www.bracknell-forest.gov.uk">Public Website</a></li>
      
      	
      </ul>
      
      
      
      
      
      		<div class="clear"></div>
      			
      		<!-- breadcrumbs -->
      		<div id="breadCrumb">
      
      			<div id="breadcrumbs" class="paddingLHS">

      				<div id="breadcrumbs" class="paddingLHS">
      
      					<p>You are here: <a href="http://boris.bracknell-forest.gov.uk/index.htm">Home </a>&gt; Search</p>
      				</div>
      			</div>
      
      		</div>
      		<div class="clear"></div>
      
      	<!-- end of the header -->

      
      <!-- start of kbroker div -->
      <h2 class="expanded">Search BORIS</h2>
      <div id="kbroker">
      
      <div class="skip">
      This page will re-load when a search is submitted, <a href="#kbresults">Skip to the Results</a>.
      </div>
      
      <div class="kbsearchform">
      <form method="get" action="search.html">

      
      <!--  <h2>Find pages:</h2> -->
      <br />
      
      <div class="row">
      <div class="fleft">
      <label class="skip" for="qt">Search</label>
      <input alt="Search" type="text" id="qt" name="qt" size="40" maxlength="1000" value="tax" />&nbsp;<input id="kbsubmit" class="yellowBut"
      type="submit" value="Search" />
      <input type="hidden" name="charset" value="iso-8859-1" />
      <input type="hidden" name="qp" value="" />

      
      <input type="hidden" name="st" value="0" />
      	    <div class="spacer"></div>
      </div>
      <div class="helplink">
      <a href="http://boris.bracknell-forest.gov.uk/search-boris-help.htm">Search Help</a>|<br />
      <a href="asearch.html">Advanced Search</a>
      <div class="spacer"></div>

      
      </div>
      </div>
      
      <input type="hidden" name="col" value="boris" /><input type="hidden" name="col" value="brackweb" />
      
      <input type="hidden" name="ha" value="1" />
      
      
      
      
      <input type="hidden" name="nh" value="10" />
      <input type="hidden" name="rf" value="0" />
      <input type="hidden" name="lk" value="1" />
      
      
      <div class="clear"></div>
      
      <table border="0" cellpadding="0" cellspacing="0">

         <tr>
            <td valign="middle">
               <form name="gs" method="GET" action="search">
                  <table border="0" cellpadding="0" cellspacing="0">
                     <tr>
                        <td>
                           <table cellpadding="4" cellspacing="0">
                              <tr>
                                 <td><font size="-1"><a class="q" onclick="return window.qs?qs(this):1" href="http://www.google.com/search?q=">Web</a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="-1"><a class="q" onclick="return window.qs?qs(this):1" href="http://images.google.com/images?q=">Images</a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="-1"><a class="q" onclick="return window.qs?qs(this):1" href="http://groups.google.com/groups?q=">Groups</a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="-1"><a class="q" onclick="return window.qs?qs(this):1" href="http://news.google.com/news?q=">News</a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="-1"><a class="q" onclick="return window.qs?qs(this):1" href="http://local.google.com/local?q=">Local</a></font>&nbsp;&nbsp;&nbsp;&nbsp;

                                    <!--trh2--><font size="-1"><b>Appliance</b></font></td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <table cellpadding="0" cellspacing="0">

                              <tr>
                                 <td valign="middle"><font size="-1"><input type="text" name="q" size="32" maxlength="256" value=""></font></td>
                                 <td valign="middle"><font size="-1">&nbsp;<input type="submit" name="btnG" value="Search"></font></td>
                                 <td nowrap="1"><font size="-2">&nbsp;&nbsp;<a href="search?access=p&amp;entqr=0&amp;output=xml_no_dtd&amp;sort=date%3AD%3AL%3Ad1&amp;ie=UTF-8&amp;client=intranet_frontend&amp;ud=1&amp;site=default_collection&amp;oe=UTF-8&amp;proxystylesheet=intranet_frontend&amp;ip=10.10.17.30&amp;proxyreload=1&amp;proxycustom=<ADVANCED/&gt;">Advanced Search</a><br>&nbsp;&nbsp;<a href="/user_help.html">Search Tips</a><br></font></td>
                              </tr>
                           </table>
                        </td>
                     </tr>

                  </table>
                  <input type="hidden" name="entqr" value="0">
                  <input type="hidden" name="output" value="xml_no_dtd">
                  <input type="hidden" name="sort" value="date:D:L:d1">
                  <input type="hidden" name="client" value="intranet_frontend">
                  <input type="hidden" name="ud" value="1">
                  <input type="hidden" name="oe" value="UTF-8"><input type="hidden" name="ie" value="UTF-8">
                  <input type="hidden" name="proxystylesheet" value="intranet_frontend">
                  <input type="hidden" name="proxyreload" value="1">

                  <input type="hidden" name="site" value="default_collection"></form>
            </td>
         </tr>
      </table>
      <hr>
      <center><br><br><p><font face="arial,sans-serif" size="-1" color="#2f2f2f">
               Powered by Google Search Appliance</font></p>
      </center><span class="p"></div>

         <div id="footer">
         		<div class="footerLeft">
         <br /><br />
         		<strong></strong>
         		</div>
         		<div class="footerRight"></div>
         	
         	<!-- End Footer -->
         	</div>
         <script type="text/javascript">
         initializetabcontent("iwanttofindDepartment")
         </script>

         <script type="text/javascript">
         initializetabcontent("Phonebook")
         </script>
         
         
         
         
         <!--</div>-->
         </body>
         </html></span></body>
    </html>


in the inline css the following lines seem to determine what happens when you hover over the menu items:

    #menu :hover ul :hover ul
    {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}


/* keep the 'next' level invisible by placing it off screen. */
    #menu ul, 
    #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}


I've used Firebug in Firefox to have a look at what happens on the Intranet version and see that #menu :hover ul :hover ul is active when hovering over the menus but not when using it for this Google Mini search.

If anyone can take a look at this - I am happy to provide any other code that I may have missed out.

Many thanks,

Sanjeev

Is This A Good Question/Topic? 0
  • +

Replies To: hover dropdown lists not working in IE 7, 8 and Forefox 6

#2 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 22 August 2011 - 07:13 AM

Order and spacing are exceedingly important in CSS.

when you tell the browser: #menu :hover ul :hover ul

First of all it isn't valid css because :hover isn't a class, an ID, or a tag. It's more of a special selector, your telling the browser that when you hover over a certain element in your markup that you want to apply special styling. Your problem is your not telling it what element you want to apply the style too because of the space you have.

Based on your HTML you are looking for something more along the lines of #menu li:hover ul (note the spacing, its important) you only have to attach the hover selector to the element you want to make the list appear when you hover over it. So here I am selecting a <ul> under an <li> that the mouse is hovering on under the ul where the ID = "menu" this is where you want to make it visible/position it, or whatever else you are doing to it.

Sorry if this is a little confusing, I'm sure someone else will come along and explain it more clearly, hopefully this will get you started though.
Was This Post Helpful? 0
  • +
  • -

#3 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 22 August 2011 - 09:47 AM

View PostMrWobbles, on 22 August 2011 - 02:13 PM, said:

Order and spacing are exceedingly important in CSS.

when you tell the browser: #menu :hover ul :hover ul

First of all it isn't valid css because :hover isn't a class, an ID, or a tag. It's more of a special selector, your telling the browser that when you hover over a certain element in your markup that you want to apply special styling. Your problem is your not telling it what element you want to apply the style too because of the space you have.

Based on your HTML you are looking for something more along the lines of #menu li:hover ul (note the spacing, its important) you only have to attach the hover selector to the element you want to make the list appear when you hover over it. So here I am selecting a <ul> under an <li> that the mouse is hovering on under the ul where the ID = "menu" this is where you want to make it visible/position it, or whatever else you are doing to it.

Sorry if this is a little confusing, I'm sure someone else will come along and explain it more clearly, hopefully this will get you started though.

Was This Post Helpful? 0
  • +
  • -

#4 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 22 August 2011 - 09:52 AM

Dear MrWobbles,

Thanks for the pointer. It was really helpful and resolved the isssue within Firefox beautifully. Sadly I am in a worse situation now with Ie as all Browser versions caese to display the dropdowns. I Basically replaced all instances in the css of '*#menu *:hover ul *:hover ul' with your suggested '#menu li:hover ul'. Do you have an ie alternative please? We don't even need an ie6 one. Anything from 7 upwards would be really helpful.

Sanjeev
Was This Post Helpful? 0
  • +
  • -

#5 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 22 August 2011 - 01:06 PM

Now, I'm not sure if you have a declared Doctype and just didn't include it, but if you don't have one you should..

Put this at the top of your html doc" <!DOCTYPE html>

if that doesn't work try this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Was This Post Helpful? 1
  • +
  • -

#6 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 23 August 2011 - 12:38 AM

View PostMrWobbles, on 22 August 2011 - 08:06 PM, said:

Now, I'm not sure if you have a declared Doctype and just didn't include it, but if you don't have one you should..

Put this at the top of your html doc" <!DOCTYPE html>

if that doesn't work try this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Was This Post Helpful? 0
  • +
  • -

#7 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 23 August 2011 - 01:00 AM

Hi there,

I had added the declarations but realise that the Google Mini interface strips them out and replaces:
<!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" xml:lang="en" lang="en">
with <html> in ie7. Firefox 6 has:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> before the <head> tag.

It may be that the Mini is converting this all to XSLT code before returning it to the page. This may be one for Google Mini support?
Was This Post Helpful? 0
  • +
  • -

#8 sanj108  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-August 11

Re: hover dropdown lists not working in IE 7, 8 and Forefox 6

Posted 23 August 2011 - 04:45 AM

MrWiggles,

You solved my problem. I managed to add the declaration code to the XSLT file and all is working as expected. Thanks so much for the pointers.

Sanjeev
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1