#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    8
    Rep Power
    0

    Question floated Div draws text over dropdown CSS


    Hi there

    I am having some trouble with my CSS dropdown menus.

    I have a floated div that contains a welcome paragraph and a menu that drops down. What is happening is that the menu is being drawn behind the text of the welcome paragraph (see attached image).

    Here are the classes...

    This draws the welcome text
    Code:
    #welcome
    {
    	float:left;
    	z-index:0;
    	width : 360px;
    	height:160px;
    	margin-left:10px;	
    	margin-top:30px;
    	font-size: 0.8em;
    }
    And this is the classes for the dropdown

    Code:
    .dropdownlink a 
    {
    	display:block;
    	width:150px;
    	height:19px;
    	font-size:0.8em;
    	color:#000000;
    	background: url(../images/nav_drop_bg.gif) top left no-repeat;
    	text-decoration: none;
    	padding-left:10px;
    	z-index:1000000000;
    }
    and this is the HTML for the menu...
    Code:
    <div id="nav_1" style="visibility:hidden; position:absolute; top: 37px; left:28px; height:100px; width:128px;">
    						<div class="dropdownlink"><a href="">Pain</a></div>
    						<div class="dropdownlink"><a href="">Pain</a></div>
    						<div class="dropdownlink"><a href="">Pain</a></div>
    						<div class="dropdownlink"><a href="">Pain</a></div>
    						<div class="dropdownlink"><a href="">Pain</a></div>	
    					</div>

    has anyone got any idea why this is ignoring the Z-index? It works in Opera, but in looks crap in IE. Is this a common problem, are there any workarounds.

    Please help, I'm pulling my hair out !
    Attached Images
  2. #2
  3. a rootin', tootin', shootin'
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Feb 2004
    Location
    location.href="hame"
    Posts
    3,475
    Rep Power
    100
    you need to give your menu a z-index too
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    8
    Rep Power
    0

    Smile


    If only that were it. I've tried adding a z-index to the menu and it still displays wrong. Thanks anyway...

    NEXT...

IMN logo majestic logo threadwatch logo seochat tools logo