Menu Not Working In IE

SalientAnimal 0 Newbie Poster

12 Years Ago

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">&nbsp;</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">&nbsp;</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 &raquo;</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">&nbsp;</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">&nbsp;</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

1 Contributor
0 Replies
109 Views

Dani AI

Generated 9 Months Ago

For : when a slide‑down panel works in Firefox but not in Internet Explorer — and it only happens after moving to the intranet server — several non‑obvious causes are common and worth checking first.

First, use IE’s F12 developer tools and check the Console for JavaScript errors and the Document Mode (Emulation). Intranet pages are often rendered in Compatibility View (old document modes) which breaks modern JS/CSS. Also inspect the DOM for invalid markup: duplicate id attributes and nested <form> elements create different DOM trees across browsers; Firefox/Chrome may tolerate those errors while IE can fail silently. Runtime errors (for example an undefined function or stray console.log calls) will stop script execution and prevent event handlers from running.

A practical checklist:

Open F12 → Console: resolve any errors shown.
Verify jQuery is actually loaded before any code that binds handlers and that the jQuery version supports the IE being used.
Fix invalid HTML: remove nested forms and ensure id attributes are unique (use classes when repeating elements).
Avoid relying on anchors with href="#" without preventing default, and avoid inline onclick handlers that reference functions which may be missing.

Two small examples that tend to improve robustness:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

/* bind by class, prevent default, delegate for dynamic DOM, and stop animation queue */
$(function(){
  $(document).on('click', '.panel-toggle', function(e){
    e.preventDefault();
    $('#panel').stop(true,true).slideToggle(300);
    $('.panel-toggle').toggle();
  });
});

Final notes: validate the page with the W3C validator to catch structural errors, and read Microsoft/MDN guidance on forcing modern IE modes if the site is intranet. Useful references: jQuery event binding (https://api.jquery.com/on/), X-UA-Compatible header (), and the HTML validator (https://validator.w3.org/).

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.