Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Wont work in Internet Explorer

Options
  • 30-05-2004 6:31pm
    #1
    Draupnir
    Registered Users Posts: 3,548 ✭✭✭


    Anybody understand why this DHTML wont work for in IE but it works grand in Firefox?



    <html>

    <head>
    <title>DHTML & CSS for the WWW | Creating a Sliding Menu</title>
    <script language="JavaScript"><!--

    var open = 0;
    var slideSpeed = 10;
    var object = null;


    function setMenu (objectID) {
    object = document.getElementById(objectID);
    if (open) { fX = -80; cX = 0; open = 0; }
    else { fX = 0; cX = -80; open = 1; }
    slideMenu(cX,fX);
    }

    function slideMenu (cX,fX) {
    if (cX != fX) {
    if (cX > fX) { cX -= slideSpeed; }
    else { cX += slideSpeed; }
    object.style.left = cX + 'px';
    setTimeout('slideMenu(' + cX + ',' + fX + ')', 0);
    }
    return;
    }
    // -->
    </script>
    <style type="text/css"><!--
    body {
    margin-left: 30px
    }

    #mainMenu {
    top: 0;
    left: -80px
    }

    .menu {
    position: fixed;
    }

    a:link {
    color: red;
    font: bold 12px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif
    }

    --></style>

    </head>

    <body>
    <span id="mainMenu" class="menu">
    <table width="100" border="0" frame="frame" cellspacing="0" cellpadding="5" bgcolor="#999999">
    <tr>
    <td align="right" bgcolor="#cccccc" width="80"><a href="#">Option 1</a></td>
    <td rowspan="6" width="10">
    <div align="left">

    <a href="javascript:setMenu('mainMenu')" onFocus="if(this.blur)this.blur();"><img src="menuTab.gif" height="100" width="15" border="0" /></a></div>
    </td>
    </tr>
    <tr>
    <td align="right" width="80"><a href="#">Option 2</a></td>
    </tr>
    <tr>
    <td align="right" bgcolor="#cccccc" width="80"><a href="#">Option 3</a></td>

    </tr>
    <tr>
    <td align="right" width="80"><a href="#">Option 4</a></td>
    </tr>
    <tr>
    <td align="right" bgcolor="#cccccc" width="80"><a href="#">Option 5</a></td>
    </tr>
    <tr>

    <td align="right" width="80"><a href="#">Option 6</a></td>
    </tr>
    </table>
    </span>
    </body>

    </html>


Comments

  • Options
    #2
    hostyle
    Registered Users Posts: 1,268 ✭✭✭hostyle


    Originally posted by Draupnir
    .menu {
    position: fixed;
    }

    Change fixed to absolute or something else valid.

    You also have a return outside a javascript function.


  • Options
    #3
    Zaltais
    Closed Accounts Posts: 304 ✭✭Zaltais


    Originally posted by hostyle
    Change fixed to absolute or something else valid.

    You also have a return outside a javascript function.


    position: fixed;

    IS valid - it just doesn't work in IE
    From the w3c

    The 'position' and 'float' properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.

    'position'
    Value: static | relative | absolute | fixed | inherit
    Initial: static
    Applies to: all elements
    Inherited: no
    Percentages: N/A
    Media: visual
    Computed value: as specified


  • Options
    #4
    hostyle
    Registered Users Posts: 1,268 ✭✭✭hostyle


    Just to be clear. I didn't mean that "fixed" was invalid. I simply meant to try changing it to something else that would work (if "absolute" didnt suit his situation). Apologies for any confusion.


Advertisement