PDA

View Full Version : Having a problem with Smooth Navigation Menu in IE



mvunsharma
07-23-2009, 07:07 PM
1) Script Title: Smooth Navigational Menu (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:

I am not a geek and trying to build my own website.

What I did:
I placed the menu inside a div element. Another div immediately follows after the menu div. Here is the html code:


<body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/adi.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content"></div>
<div id="footer">

</div>
</div>
</body><body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/alpha.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content">
</div>
<div id="footer">

</div>
</div>
</body>


Here is the CSS for those div tags:


#menubar{
position: absolute;
width: 100%;
height: 5%;
top: 15%;
}
#content{
position: absolute;
top: 21%;
width: 100%;
height: 75%;
background-color: #666666;
}


PROBLEM 1:
I cannot see the drop down menu.
When I have a background color for the content div, I notice that drop down menu wraps under the content area (simply not visible to the user).
I switched off the background-color and I can navigate to the first li element in the menu.

PROBLEM 2:
The menu folds up when I try to navigate to second li.
I cannot navigate down the first li element. The menu simply folds up. Then I changed the top position to 75% and the height to 3%. Now the menu works perfectly fine.


As I said, the problem occurs in IE6 and IE7. FF works fine. Any clues? Should I change the position elements from absolute to relative?

Regards and Have a good day!
Nagesh