Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation IE doesn't allow click on hover over on drop down menu

    PLEASE SOMEONE HAVE SOME MERCY ON ME AND HELP ME OUT!

    I have a page im testing/building over at http://adrianobatista.co.cc/ie/ and when you hover over "valves" it shows the drop down which is "smaller valves" and "larger valves." However, it wont allow you to click the freaking items. It just wont i dont freaking know why. Its making me very angry. In firefox, opera, chrome, and safari, you hover over it and it shows the drop down, and you can click the items. Not in IE for some reason. Im using a simple bit of CSS to make the bg image fill the whole browser
    Code:
    <style>
    body, html { margin:0; padding:0; height:100%; width:100%; }
    #bgimage {position:fixed; left:0; top:0; z-index:1; height:100%; width:100%; }
    #content {position:absolute; left:0; top:0; z-index:70; height:100%; width:100%; }
    </style>
    And the img and content goes inside of a table. the content inside of a <div>

    Code:
    <div>
    	<table cellspacing="0" cellpadding="0">
        	<tr>
            	<td>
                	<img id="bgimage" src="images/1234.png" />
                    <div id="content">
                    
                    <span style="float:left; padding-right:5%"><a href="index.html"><img src="images/greenvalve usa_r2_c2_s1.png" alt="GreenValve LOGO" border="0"/></a></span>
    <!-- Start CSS MENU -->
    <span class="pureCssMenui"><a class="pureCssMenui" href="index.html"><span style="float:left; padding-right:55px"></span></a></span>
    <ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="index.html">HOME</a></li>
    	<li class="pureCssMenui"><a class="pureCssMenui" rel="shadowbox;width=700%" href="/mf/view.php?id=1">CONTACT</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui " href="#"><span>VALVES</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
    		<li class="pureCssMenui"><a class="pureCssMenui " href="valves1.html">Smaller Valves</a></li>
    
    		<li class="pureCssMenui"><a class="pureCssMenui" href="valves2.html">Larger Valves</a></li>
      </ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="demo.html">HOW DOES IT WORK?</a></li>
    </ul>
    </div>
                </td>
            </tr>
         </table>
    </div>
    the menu's css is
    Code:
    a.active:link{
    	
    	color: #0065c3;
    	}
    
    
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	border-style:none;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:101.85000000000001px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:1px 0px 0px 3px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	border-width:0px;
    	border-color:#6655ff;
    	border-style:none;
    	text-align:left;
    	text-decoration:none;
    	padding:6px;
    	_padding-left:0;
    	font:normal 15px Verdana;
    	font-weight:bold;
    	color: #69a90e;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:center;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:5;
    	height:16;
    	display:inline-block;background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:80%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    	
    }
    ul.pureCssMenu li:hover>a{
    	border-color:#665500;
    	border-style:none;
    	font:normal 15px Verdana;
    	font-weight:bold;
    	color: #0065c3;
    	text-decoration:none;
    	
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	border-color:#665500;
    	border-style:none;
    	font:normal 15px Verdana;
    	font-weight:bold;
    	color: #0065c3;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{
    	display:block;
    	padding-right:11px;
    	font-family: Verdana;
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You do have a couple of coding validation errors. Not saying thats the problem, but IE is very picky when it comes to correct code. One in particular is the <style> tag for your embedded CSS. I think the opening style tag should be
    <style type="text/css">

    style rules here

    </style>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •