25
I am trying to implement a DHTML nav menu and I'm having a problem in IE8.
The page basically has 2 content areas in DIV tags. The menu is in the 1st DIV on the left and the page content is in the main DIV on the right.
The problem is that when the menu expands on mouseover it goes under the content area to its right. (Only happens in IE.)
Any suggestions on how I can send the content area DIV ("content-zone") to the back so that the menu displays properly? I'm assuming it has something to do with the Z-Index property.
The "PLVFOaASHHVADiv" and its contents are being generated using a 3rd party tool (whose tech support hasn't been very helpful). Haven't been able put the menu on top by changing its settings, so I'm focussing on pushing the other DIV back instead.
Attached is the HTML along with the javascript file it uses for the menu.
Thanks.
P.S. Here is the code inline.
HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>blah blah</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta http-equiv='expires' content='0'><meta http-equiv='pragma' content='no-cache'>
- <meta http-equiv="X-UA-Compatible" content="IE-7">
- <style type="text/css">
- <!--
- /* from colors.css */
- #borderTopColor {border-top:5px solid #B24700;}
- #color {color:#B24700;}
- #tableborderline {border-collapse: collapse;border-color:#B24700;}
- #tblbgColor {background-color:#B24700;}
- /* from page-layout.css */
- body{
- margin: 0;
- padding:0;
- background: #1A50B8; /* goes w/dblue.css */
- color: #333333;
- }
- #hdr{
- height:130px;
- background:#ffffff;
- color:#000000;
- border:solid #000000;
- border-width:2px 0px;
- margin:5px 0 0 0;
- text-align:center; }
- #lh-col{
- position: absolute;
- top: 150px;
- left: 10px;
- width: 180px;
- /* border: 2px solid #000000;
- background: #c0c0c0;
- color: #333333;*/
- margin: 0px;
- padding: 0px;
- height: 400px;
- }
- #content-zone{
- margin: 20px 20px 20px 140px;
- border: 2px solid #000000;
- background: #ffffff;
- color: #333333;
- padding: 20px;
- position :relative;
- z-index: inherit
- }
- -->
- </style>
- </head>
- <body>
- <!-- beg HEADER --><div id="hdr">[SNIPPED]</div><!-- end HEADER area -->
- <!-- beg NAV --><div id="lh-col">
- <div id="PLVFOaASHHVADiv" style="width:125px;position:relative;z-index:50;">
- <div>
- <ul style="float:left;margin:0;padding:2px;width:119px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;border:solid 1px #000000;background-color:#7FBAFF;">
- <li style="display:block;float:left;width:117px;height:17px;text-align:left;border:solid 1px #7FBAFF;"><a style="display:block;padding:2px 6px 0px 6px;text-decoration:none;color:#000000;" href="#">A</a></li>
- <li style="display:block;float:left;width:117px;height:17px;margin-top:0px;text-align:left;border:solid 1px #7FBAFF;"><a style="display:block;padding:2px 6px 0px 6px;text-decoration:none;color:#000000;" href="#">B</a></li>
- <li style="display:block;float:left;width:117px;height:17px;margin-top:0px;text-align:left;border:solid 1px #7FBAFF;background: url(Pluginlab/fo_arrow.gif) no-repeat 110px 50%;"><a style="display:block;padding:2px 13px 0px 6px;text-decoration:none;color:#000000;" href="#">C</a></li></ul></div><script type="text/javascript" src="PLVFO5.js">/* PLVFOMenu script ID:PLVFOaASHHVA */</script>
- </div>
- </div><!--PLVFOYaLFHVADiv-->
- <br/>
- <!-- end NAV area -->
- <div id="content-zone">
- <p>blah blah</p>
- <p> </p>
- </div><!--content-zone-->
- </body>
- </html>
