www.webdeveloper.com
Results 1 to 2 of 2

Thread: Menu Not Working In IE

  1. #1
    Join Date
    May 2012
    Posts
    11

    Angry Menu Not Working In IE

    Hi All,

    I have a bit of a problem with the site I have been working on. Originally I built it on my laptop, to later transfer over onto the "Intranet" server.

    On my laptop, everything was working perfectly and as intended. I then transferred it onto the server and when testing on the server it works perfectly as well.

    I then access the server using the web address and on Firefox it works perfectly, however on IE my slide down panel does not work. The slide down panel is where a user would login / register, so with that not working they aren't even able to register / login

    Here is the code of my index page, as I am not sure what other code to provide you with, maybe you can request any other info you would like to see?

    Javascript
    Code:
    $(document).ready(function() {
    	
    	// Expand Panel
    	$("#open").click(function(){
    		$("div#panel").slideDown("slow");
    	
    	});	
    	
    	// Collapse Panel
    	$("#close").click(function(){
    		$("div#panel").slideUp("slow");	
    	});		
    	
    	// Switch buttons from "Log In | Register" to "Close Panel" on click
    	$("#toggle a").click(function () {
    		$("#toggle a").toggle();
    	});		
    		
    });
    CSS
    Code:
    /***** clearfix *****/
    .clear 	
    		{
    		clear: both;
    		height: 0;
    		line-height: 0;
    		}
    		
    .clearfix:after 
    		{
    		content: ".";
    		display: block;
    		height: 0;
    		clear: both;
    		visibility: hidden;
    		}
    
    .clearfix 
    		{
    		display: inline-block;
    		}
    
    /* Hides from IE-mac \*/
    * html .clearfix 
    		{
    		height: 1%;
    		}
    
    .clearfix 
    		{
    		display: block;
    		}
    
    /* End hide from IE-mac */
    .clearfix 
    		{
    		height: 1%;
    		}
    
    .clearfix 
    		{
    		display: block;
    		}
    		
    		
    
    
    /* Panel Tab/button */
    .tab 
    		{
    		background: url(../images/tab_b.png) repeat-x 0 0;
    		height: 42px;
    		position: relative;
    		top: 0;
    		z-index: 999;
    }
    
    .tab ul.login 
    		{
    		display: block;
    		position: relative;
    		float: right;
    		clear: right;
    		height: 42px;
    		width: auto;
    		font-weight: bold;
    		line-height: 42px;
    		margin: 0;
    		right: 150px;
    		color: white;
    		font-size: 80%;
    		text-align: center;
    }
    
    .tab ul.login li.left {
      	background: url(../images/tab_l.png) no-repeat left 0;
      	height: 42px;
    	width: 30px;
    	padding: 0;
    	margin: 0;
      	display: block;
    	float: left;
    }
    
    .tab ul.login li.right {
      	background: url(../images/tab_r.png) no-repeat left 0;
      	height: 42px;
    	width: 30px;
    	padding: 0;
    	margin: 0;
      	display: block;
    	float: left;
    }
    
    .tab ul.login li {
     	text-align: left;
      	padding: 0 6px;
    	display: block;
    	float: left;
    	height: 42px;
      	background: url(../images/tab_m.png) repeat-x 0 0;
    }
    
    .tab ul.login li a {
    	color: #ED1C24;
    }
    
    .tab ul.login li a:hover {
    	color: #FFFFFF;
    }
    
    .tab .sep {color:#001B54}
    
    .tab a.open, .tab a.close {
    	height: 20px;
    	line-height: 20px !important;
    	padding-left: 30px !important;
    	cursor: pointer;
    	display: block;
    	width: 100px;
    	position: relative;
    	top: 11px;
    }
    
    .tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
    .tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
    
    
    
    /* DEFINE THE PROPERTIES OF THE SLIDE DOWN PANNEL FOR A USER WHO IS LOGGED IN*/
    
    /* sliding panel */
    #toppanel {
        /*position: absolute;   	/*Panel will overlap  content */
        position: relative;		   	/*Panel will "push" the content down */
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    #panel {
    	width: 100%;
    	height: 300px;
    	color: #FFFFFF;
    	background: #001B54;
    	overflow: hidden;
    	position: relative;
    	z-index: 3;
    	display: none;
    }
    
    
    #panel h1 {
    	font-size: 1.6em;
    	padding: 5px 0 10px;
    	margin: 0;
    	color: white;
    }
    
    
    #panel h2{
    	font-size: 1.2em;
    	padding: 10px 0 5px;
    	margin: 0;
    	color: white;
    }
    
    #panel p {
    	margin: 5px 0;
    	padding: 0;
    }
    
    #panel a {
    	text-decoration: none;
    	color: #ED1C24;
    	font-weight: bold;
    }
    
    #panel a:hover {
    	color: white;
    }
    
    #panel a-lost-pwd {
    	display: block;
    	float: left;
    }
    
    #panel .content {
    	width: 960px;
    	margin: 0 auto;
    	padding-top: 15px;
    	text-align: left;
    	font-size: 0.85em;
    }
    
    #panel .content .left {
    	width: 280px;
    	float: left;
    	padding: 0 15px;
    	border-left: 1px solid grey;
    }
    
    #panel .content .right {
    	border-right: 1px solid grey;
    }
    
    #panel .content form {
    	margin: 0 0 10px 0;
    }
    
    #panel .content label {
    	float: left;
    	padding-top: 8px;
    	clear: both;
    	width: 280px;
    	display: block;
    }
    
    #panel .content input.field {
    	border: 1px #1A1A1A solid;
    	background: #FFFFFF;
    	margin-right: 5px;
    	margin-top: 0px;
    	width: 200px;
    	color: black;
    	height: 20px;
    }
    
    #panel .content input:focus.field {
    	background: #C9C9C9;
    	color: #ED1C24;
    		}
    
    /* BUTTONS */
    /* Login and Register buttons */
    #panel .content input.bt_login,
    #panel .content input.bt_register {
    	display: block;
    	float: left;
    	clear: left;
    	height: 25px;
    	text-align: center;
    	cursor: pointer;
    	border: none;
    	font-weight: bold;
    	margin: 10px 0;
    }
    
    #panel .content input.bt_login {
    	width: 74px;
    	background: transparent url(../images/bt_login.png) no-repeat 0 0;
    }
    
    #panel .content input.bt_register {
    	width: 94px;
    	color: white;
    	background: transparent url(../images/bt_register.png) no-repeat 0 0;
    }
    
    #panel .lost-pwd {
    	display: block;
    	float:left;
    	clear: right;
    	padding: 15px 5px 0;
    	font-size: 0.95em;
    	text-decoration: underline;
    }

  2. #2
    Join Date
    Jan 2014
    Posts
    11
    What version jQuery and IE? jQuery version 2.x does not support < IE9.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles