Meaningless Drivel is fun!*
The moose likes HTML, CSS and JavaScript and the fly likes CSS : z-index: property not working Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS : z-index: property not working" Watch "CSS : z-index: property not working" New topic
Author

CSS : z-index: property not working

babukumar thannasi
Greenhorn

Joined: Sep 13, 2007
Posts: 5
Hi All ,
i have a Strange issue with z-index: property, when i include this in my div tag to display one layer over another it works fine in .html file. but when i convert this as jsp , the layer ovelapping is not happing.

i am using IE6.
Server WAS6.1.

Please let me know what mistake i am making
thanks
Babu

below is my html code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
.mystyle {
border-collapse: collapse;
font-family:Arial;font-size:10px;
}
td.border1 {
border:#666 solid 1px;
width:33pt;
}
</style>
<BODY>
<div class="scrollingtable" style="width:600px; text-align:left; height:475px; border:1px solid #666; margin-top:10px; background-color:#fff; overflow:scroll;">
<div>
<table class="mystyle" style="width:465px;">
<thead>
<tr height="10">
<th style='width:10px'></th>
<th style="width:30px;text-align:center;">Pizza</th>
<th style="width:350px;text-align:center;">Idly</th>
<th style="width:75px;text-align:center;">Sambar </th>
</tr>
</thead>
<tr height="20">
<td class="border1">

1</td>
<td class="border1">2</td>
<td class="border1">3</td>
<td class="border1">4</td>
</tr>
</table>
</div>
<div style=" top: 13;left: 99;position: absolute;z-index: 1; visibility: show;">Hi</div> </div>
</BODY>
</HTML>



below is my jsp code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<HTML>
<HEAD>
<TITLE> New Document JSP </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
.mystyle {
border-collapse: collapse;
font-family:Arial;font-size:10px;
}
td.border1 {
border:#666 solid 1px;
width:33pt;
}

</style>
<BODY>
<div class="scrollingtable" style="width:600px; text-align:left; height:475px; border:1px solid #666; margin-top:10px; background-color:#fff; overflow:scroll;">
<div>
<table class="mystyle" style="width:465px;">
<thead>
<tr height="10">
<th style='width:10px'></th>
<th style="width:30px;text-align:center;">Pizza</th>
<th style="width:350px;text-align:center;">Idly</th>
<th style="width:75px;text-align:center;">Sambar </th>
</tr>
</thead>
<tr height="20">
<td class="border1">

1</td>
<td class="border1">2</td>
<td class="border1">3</td>
<td class="border1">4</td>
</tr>
</table>
</div>
<div style=" top: 13;left: 99;position: absolute;z-index: 1; visibility: show;">Hi</div>
</div>
</BODY>
</HTML>

[ September 13, 2007: Message edited by: babukumar thannasi ]
[ September 13, 2007: Message edited by: Bear Bibeault ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

If the HTML sent to the browser is the same whether its an HTML file or a JSP, then this isn't a JSP issue.

So is it?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
babukumar thannasi
Greenhorn

Joined: Sep 13, 2007
Posts: 5
Thanks for the reply Bibeault,


But when i run this as a HTML file from my IDE (RSA 7), the browser renders this correctly, and when i run the jsp file , the browser is not rendering the layer, i mean z-index: property
[ September 13, 2007: Message edited by: babukumar thannasi ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

Compare the HTML sent to the browser in each case to see what the diferences are.
babukumar thannasi
Greenhorn

Joined: Sep 13, 2007
Posts: 5
Thanks Bibeault,
i found the issue now, in my JSP , if i have Doctype as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> its working fine . However,

if i have Doctype as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> in my jsp its not working ..

is the CSS : z-index: property is any thing to do with doctype?
can any body explain why it is behaving so ?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

Originally posted by babukumar thannasi:
is the CSS : z-index: property is any thing to do with doctype?
can any body explain why it is behaving so ?


http://www.quirksmode.org/css/quirksmode.html
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: CSS : z-index: property not working
 
Similar Threads
Scroll table within a table not working
problem in running a servlet
center a div inside a div
upload file in jsp
how to position div over table