• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

CSS : z-index: property not working

 
babukumar thannasi
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64718
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
babukumar thannasi
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64718
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Compare the HTML sent to the browser in each case to see what the diferences are.
 
babukumar thannasi
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64718
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic