www.webdeveloper.com
Results 1 to 7 of 7

Thread: Z-Index problems

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Question Z-Index problems

    Ok, so I've got a div that shows up on mouseover by using Javascript to change classes. That's all well and good, but the stupid div doesn't show up in front of the other icons to mouse-over, even though I've gone as far as to set the z-index to 10,000 (z-index:10000

    I've attached a screenshot of my problem.

    I just noticed this in my last run-through, which sucks because we were going to go live this afternoon.

    Any help/advice would be greatly appreciated! Thanks!
    Attached Images Attached Images

  2. #2
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    ok, the winky face was not intentional... it was a ; and a )

  3. #3
    Join Date
    Jul 2006
    Posts
    207
    Are you using position: relative; in addition to the z-index?

  4. #4
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Yes. Here is an example of my code once it hits client-side and a link to one of the pages.

    http://www.newhometeam.net/zyx/platmap.php?platID=65

    Code:
    <script type="text/javascript">
    	function change_class(My_Element, My_Class) {
    		document.getElementById(My_Element).setAttribute("class", My_Class);
    	}
    </script>
    And in the body:

    Code:
    	<div id="lot1" style="position:absolute;left:20px;top:119px;z-index:4;">
    		<a href="detail.php?platID=65&fpID=317&lotID=1593" style="z-index:5;display:block;width:37px;height:17px;" onMouseOver="change_class('tooltip1','visiDiv')" onMouseOut="change_class('tooltip1','hiddenDiv')">
    		<img src="img/status/platmap_sold.gif" alt="Sold" style="-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);" /></a>
    		
    		<ul id="tooltip1" class="hiddenDiv" style="position:absolute;left:-10px;top:30px;z-index:10000 !important;">
    			<li class="sold">Homesite 2 Ph I (Sold)</li>
    			
    			<li>The Thoreau-3225 Plan</li>
    
    			<li>3,225 Sqft</li>
    			<li>4 Bed / 2.75 Bath</li>
    			<li>3-car Garage</li>
    					
    			<li>MLS #: 184561</li>
    			
    			
    		</ul>
    	</div>

  5. #5
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Oh, and the CSS:

    Code:
    .hiddenDiv{
    	visibility:hidden;
    	text-align:center;
    	font-size:10px;
    	position:relative;
    	top:-5000px !important;
    	left:-5000px !important;
    	width:180px;
    	padding:5px;
    	background-color:#FFF;
    	color:#000;
    	list-style-type:none;
    	border:4px #600 double;
    	-moz-border-radius:30px 0;
    	-webkit-border-radius:30px 0;
    	border-radius:30px 0;
    	z-index:-10000;
    }
    .visiDiv{
    	text-align:center;
    	font-size:10px;
    	position:relative;
    	width:180px;
    	padding:5px;
    	background-color:#FFF;
    	color:#000;
    	list-style-type:none;
    	border:4px #600 double;
    	-moz-border-radius:30px 0;
    	-webkit-border-radius:30px 0;
    	border-radius:30px 0;
    	z-index:10000;
    }

  6. #6
    Join Date
    Jul 2006
    Posts
    207
    Removing the z-index from the 'sold' DIVs worked for me and didn't seem to cause any problems.

  7. #7
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Yes! That works perfectly! It's glorious, thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles