Forum:

HTML Pages with CSS and JavaScript

Absolute set Div with z-index Problem

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

In my web page there is one div element set to relative.
Inside that div I have two divs one above the other & both are set absolute.

When I mouse over the inner divs there height increases downward to show more options.
The problem is when the inner div which is on the top increases on mouse over, it goes beneath the div which is at the bottom.

To solve the problem I set the z-index of the top div to higher than the bottom div. But the problem persists.
Note: The problem is solved in mozilla browser using z-index but not in Internet Explorer.

Please help me to solve the problem...

Thank you...

Ankit Garg

Sheriff

Posts: 9708

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

On which version of internet explorer is it not working. Can you also show us relevant excerpts from the code which might make it easier to help...

SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am sending link to check the problem...

I am using InternetExplorer 6 version. Below I am putting all code I am using...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="mypage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mypage.js"></script>

</head>

CSS Code:

@charset "utf-8";
/* CSS Document */

#alldesignsouter {
	height: auto;
	width: 990px;
	margin-top: 35px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}
#alldesignsouter .rowbox {
	height: 199px;
	margin-bottom: 20px;
	position: relative;
}
#alldesignsouter .columnbox1 {
	position: absolute;
	height: 199px;
	width: 186px;
	left: 0px;
	top: 0px;
	background-color: #CCC;
}
#alldesignsouter .columnbox2 {
	position: absolute;
	height: 199px;
	width: 186px;
	left: 201px;
	top: 0px;
	background-color: #CCC;
}
#alldesignsouter .columnbox3 {
	position: absolute;
	height: 199px;
	width: 186px;
	left: 402px;
	top: 0px;
	background-color: #CCC;
}
#alldesignsouter .columnbox4 {
	position: absolute;
	height: 199px;
	width: 186px;
	left: 603px;
	top: 0px;
	background-color: #CCC;
}
#alldesignsouter .columnbox5 {
	position: absolute;
	height: 199px;
	width: 186px;
	left: 804px;
	top: 0px;
	background-color: #CCC;
}
#alldesignsouter #columnbox0, #alldesignsouter #columnbox1, #alldesignsouter #columnbox2, #alldesignsouter #columnbox3, #alldesignsouter #columnbox4 {
	z-index: 200;
}

#alldesignsouter #columnbox5, #alldesignsouter #columnbox6, #alldesignsouter #columnbox7, #alldesignsouter #columnbox8, #alldesignsouter #columnbox9 {
	z-index: 190;
}

#alldesignsouter #columnbox10, #alldesignsouter #columnbox11, #alldesignsouter #columnbox12, #alldesignsouter #columnbox13, #alldesignsouter #columnbox14 {
	z-index: 180;
}

#alldesignsouter #columnbox15, #alldesignsouter #columnbox16, #alldesignsouter #columnbox17, #alldesignsouter #columnbox18, #alldesignsouter #columnbox19 {
	z-index: 170;
}

Js Code:

// JavaScript Document

window.onload = initAll;

function initAll(){
	designMessageEffect();	
}

var timeOutVar = null;
var count = 0;
var baseHeight = 199;
function showAllActions(val){
	if(count==0){blocks[val].style.backgroundColor='#f9c9d9'}//-------
	baseHeight = baseHeight + 10;
	blocks[val].style.height = baseHeight+'px';

count = count + 1;
	if(count>20){		  
	  clearTimeout(timeOutVar);			  
	  return false;
	}
	
	timeOutVar = setTimeout('showAllActions('+val+')',5);
}

function hideAllActions(val){
	count = 0;		
	baseHeight=199;
	blocks[val].style.height = baseHeight+'px';
	blocks[val].style.backgroundColor='#ccc';//-------
	clearTimeout(timeOutVar);			  
	return false;
}

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Please any buddy have any idea to solve the problem...

Ankit Garg

Sheriff

Posts: 9708

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Its not working on IE 7 either. Can you try to set the z-index of #rowbox1, #rowbox2 etc and see if it works. I tried it after downloading the file but then IE fails to load the file so you'll have to try it yourself...

SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links