Reply LinkBack Thread Tools Search this Thread
Old 25-02-2010, 01:33   #1 (permalink)
neha_saas
Registered User
 
Join Date: Feb 2010
Posts: 2
Dropdown menu hidden behind the content in IE6

Can anyone please help me to display the dropdown menu above the content. as of now the dropdown menu is hidden behind the page content in IE6. i tried to change the z-index property.but in vain.its an urgent requirememt!!

PLEASE HELP!!!!

Last edited by neha_saas : 25-02-2010 at 02:04.
  Reply With Quote
Old 25-02-2010, 02:06   #2 (permalink)
cjgraphix
Website Developer
 
cjgraphix's Avatar
 
Join Date: Jun 2007
Location: Pacific Northwest
Posts: 556
without showing code it's almost pointless.... but. did you give the dropdown menu a 'position' attribute? z-index doesn't work without it.
__________________
  Reply With Quote
Old 25-02-2010, 04:39   #3 (permalink)
jamblo
cuttin' and stickin'
 
jamblo's Avatar
 
Join Date: Jan 2008
Location: Devon
Posts: 941
Try { position: relative }
__________________
  Reply With Quote
Old 25-02-2010, 05:27   #4 (permalink)
neha_saas
Registered User
 
Join Date: Feb 2010
Posts: 2
Thank u for the help,i tried it with z-index and position.it still doesnt work.

Below is the dropdown.css file.

ul,ol,li{list-style-type:none; margin:0px; padding:0px;}

.topmenuwrapper{width:100%; height:26px; position:relative;z-index:0}
#menu {padding:0; margin:0 ; list-style:none; height:26px; position:relative; z-index:10000; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; padding:0 0px; font-weight:normal;}
#menu li {float:left; margin-right:1px; background:url(topnav_bg_link.gif) repeat-x left top;}
#menu li a {display:block; float:left; height:26px; line-height:26px; ; color:#18347d; text-decoration:none; font-size:12px; font-weight:normal; padding:0 20px;/* background:url(topnav_bg_link.gif) repeat-x left top;*/}
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */
#menu li.current a {z-index:500; position:relative;color:#000; background:#38508c url(topnav_sel_bg.gif) repeat-x left top;}
#menu li a:hover {z-index:500; position:relative;color:#18347d; background:#2775b3 url(topnav_bg_hover.gif) repeat-x left top;}
#menu li:hover {position:relative; z-index:500;}

#menu li:hover > a {color:38508c; background:#2775b3 url(topnav_bg_hover.gif) repeat-x left top;}
#menu li:hover > a.sub {color:#fff; background:url(topnav_sel_bg.gif) repeat-x left top;}

#menu li.current a {color:#fff; background:#38508c url(topnav_sel_bg.gif) repeat-x left top;}

#menu li a.sub {background: transparent; }
#menu li.current a.sub {color:#fff;background:url(topnav_sel_bg.gif)repea t-x; }

/* */#menu :hover ul {left:0; top:26px; width:180px; background:#c6d1ed; padding-bottom:15px; }

/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
/* */#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0 ; padding:15px 0 15px 0 ; list-style:none; background:#c6d1ed; width:204px;}

#menu :hover ul :hover ul
{left:120px; top:-1px; background:#c6d1ed; white-space:nowrap; z-index:200; height:auto; z-index:100;}

/* */#menu :hover ul li {margin:0; background:#c6d1ed; width:180px}
#menu :hover ul li a {width:170px;padding:0 0px 0 9px; text-indent:10px; background:#fff; color:#fff; height:24px; line-height:24px; background:#c6d1ed url(arow-white.gif) no-repeat 9px 8px; display:block; }
#menu :hover ul li a.fly {background:#fff }
#menu :hover ul li a.large {width:200px; padding:0 0 0 26px; text-indent:10px; background:#fff; color:#696868; height:24px; line-height:24px; background:url(arrow-green.gif) no-repeat 16px center; display:block; }

#menu :hover ul :hover {background:#c6d1ed url(hover_lul_bg.png) no-repeat 0px 0px; color:#ffffff;}
#menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#menu :hover ul li.currentsub a {background:#840; color:#fff;}
#menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}

#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
#menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}

#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;}


this is the html file
  Reply With Quote
Old 25-02-2010, 07:16   #5 (permalink)
socreative
web jokey
 
socreative's Avatar
 
Join Date: Jun 2009
Location: Moist Blighty
Posts: 1,028
what content is it ? just a web page or is it a flash animation?
  Reply With Quote
Old 25-02-2010, 09:07   #6 (permalink)
Dusteh
Right time, wrong thread
 
Dusteh's Avatar
 
Join Date: Sep 2004
Posts: 7,969
Seeing that you have topmenuwrapper set at 0 I'm guessing it is passing that on to all of the child elements. Z-index is not absolute - setting something to Z-index 500 within a relatively positioned parent element with Z-index 0 won't make it affect anything outside of that parent element. So if the content block has Z-index 1 - it wins.
  Reply With Quote
Old 25-02-2010, 09:27   #7 (permalink)
Aibrean
Brutally Honest
 
Aibrean's Avatar
 
Join Date: Jan 2004
Location: Dayton, OH
Posts: 1,048
Send a message via AIM to Aibrean Send a message via MSN to Aibrean
If you have flash the wmode parameter needs to be set to transparent. You haven't provided an html file for us to view the content.

It works.
__________________

  Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive
Web Hosting by Heart Internet, vBulletin © 2000-2009 Jelsoft Enterprises Limited.
Search Engine Optimization by vBSEO 3.0.0 RC8
Web Hosting by Heart Internet