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
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Drop Down Menu Not Working Correctly With CSS

    Hey All,

    I've got a bit of a problem. I have a CSS-driven page that works great. It has a drop down menu (OpenCube's Visual QuickMenu Pro) however that is causing a problem.

    I view it with the IE window maximized and the menu lines up without any problems. Then if I double click the top bar and resize the IE window to make it smaller, the submenus don't line up correctly below the main nav items.

    If I resize the window by dragging the bottom right of the it (fluidly), that works fine. This problem seems to happen when you double click the top of the IE window, or click the maximize/minimize window.

    Now if I remove the surrounding "content" div tag, the problem goes away. However, this screws the page up. It has to have something to do with the absolute positioning, but I'm not sure how to fix this.

    I've included the HTML code and the relative CSS. Any ideas would be greatly appreciated.

    Thanks!

    CSS:

    body {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    background-color: #f7f7f7;
    height: 100%;
    font-family: Verdana, Arial, sans-serif;
    }

    #content {
    position: absolute;
    float: left;
    left: 50%;
    width: 760px;
    height: 100%;
    margin-left: -380px;
    border: 1px solid #ccc;
    border-width: 0 1px;
    background-color: #fff;
    /*border:1px solid #ffcc00;*/
    background: #ccc url(images/bg.gif) repeat-y 50% 0;
    }
    body>#content {
    margin-left:-380px; /* Correct value. */
    }

    #topHeader {
    width: 760px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    /*border:1px solid #ffcc00;*/
    }

    #nav {
    margin: 0px;
    padding: 0 0 20px 0;
    height: 20px;
    text-align: center;
    background: #fff;
    /*border: 1px solid #ffcc00;*/
    }

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>:: ::</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body>

    <script language="JavaScript1.2" vqm_id="data.js">
    vqm__codebase="script/";
    vqm__database="";
    </script>
    <script language="JavaScript1.2" src="data.js"></script>
    <script language="JavaScript1.2" src="script/tdqm_loader.js"></script>

    <div id="content">

    <!-- table fix needed to properly space page and footer when resizing window on the fly -->
    <table border="0" height="100%" width="100%" align="center" valign="bottom" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top">

    <div id="topHeader"><img src="images/asset_header.jpg" border="0"></div>
    <div id="nav"><script language="JavaScript1.2">generate_mainitems()</script></div>

    </div>

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    bump.


  •  

    Posting Permissions

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