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?
<!-- LOGIN AND REGISTRATION END -->
<!-- DETAILS TO CONFIGURE THE LOGIN TAB -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Nice to see you again</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#"><?php echo htmlentities($_SESSION['username']);?>!</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
<!-- LEFT SECTION OF THE LOGIN PANEL IS DEFINED HERE. THE SECTION BELOW IS WHAT WILL BE SEEN BY USERS WHO ARE NOT LOGGED IN-->
<?php else : ?>
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<!-- LEFT SECTION OF THE LOGIN PANEL IS DEFINED HERE. -->
<div class="left">
<h1>TechDesignLab Tracker Utility</h1>
<h2>You need to be logged in to view this content</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>TechDesignLab Website</h2>
<p class="grey">Click the link <a href="http://www.TechDesignLab.co.za" title="TechDesignLab Website">to visit the TechDesignLab Website »</a></p>
</div>
<div class="left">
<?php
if (isset($_GET['error'])) {
echo '<p class="error">Error Logging In! Please verify that you are using the correct username and password combination.</p>';
}
?>
<!-- MIDDLE SECTION OF THE SLIDING PANEL - CONTROLS THE LOGIN OF A USER -->
<form class="clearfix" action="includes/process_login.php" method="post" name="login_form">
<h1>Agent Login</h1>
<form action="includes/process_login.php" method="post" name="login_form">
<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23"/>
<label class="grey" for="password">Password:</label>
<input class="field" type="password" name="password" id="password" size="23"/>
<div class="clear"></div>
<input type="button" value="Login" class="bt_login" onclick="formhash(this.form, this.form.password);"/>
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<!-- RIGHT SECTION OF THE SLIDING PANEL - CONTROLS THE REGISTRATION OF A USER -->
<div class="left right">
<?php
if (!empty($error_msg)) {
echo $error_msg;
}
?>
<h1>New Agent Registration</h1>
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="registration_form">
<label class="grey" for="signup">Username:</label>
<input class="field" type='text' name='username' id='username' value="" size="23"/>
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23"/>
<label class="grey" for="password">Password:</label>
<input class="field" type="password" name="password" id="password"/><br>
<label class="grey" for="password">Confirm Password:</label>
<input class="field" type="password" name="confirmpwd" id="confirmpwd"/><br>
<input class="bt_register" type="button" value="Register" onclick="return regformhash(this.form,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);"/>
</form>
</div>
</div>
</div>
<!-- LOGIN AND REGISTRATION END -->
<!-- DETAILS TO CONFIGURE THE LOGIN TAB -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li><span class="error">Click here to</span></li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In / Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
<?php endif; ?>
<div id="container">
<div id="content" style="margin-top:-45px;">
<img src="images/logo.png" alt="TechDesignLab"></img>
<h1>Auxilium</h1>
<h2>TechDesignLab - About Us</h2>
<p>Company Overview</p>
<p class="highlight"></p>
<p>Company Profile
</p>
</div><!-- / content -->
</div><!-- / container -->
<div id="container">
<div id="footer" style="margin-top:10px;">
<footer style="background:#E5E5E5; height:20px">
<p>Copyright © TechDesignLab 2014 | <a href="mailto:leon.laassen@TechDesignLab.TechDesignLab.co.za">Contact Us</a>.</p>
<img src="images/altron-footer-logo.png" alt="Altron Footer Logo" align="left"></img>
<img src="images/TechDesignLab_bbbee.png" alt="TechDesignLab Level 2 BBEE" align="left"></img>
</footer>
</div><!-- / footer -->
</div><!-- / container -->
</body>
</html>
My JavaScript
$(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();
});
});
And my CSS
/***** 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;
}
All code supplied is for the sliding panel. Thanks