View Full Version : Drop Down Menu Not Working Correctly With CSS

09-24-2004, 02:54 PM
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.



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;*/


<!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">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>:: ::</title>
<link rel="stylesheet" href="styles.css" type="text/css" />

<script language="JavaScript1.2" vqm_id="data.js">
<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">
<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>


09-27-2004, 01:42 PM
bump. :)