ho un grafico dove IE sembra non rispettare i css.
Mentre FF sembra rispettare le impostazioni nei css dei z-index, IE non le rispetta assolutamente e nonostante le varie prove effettuate le righe grigie orizzantali vanno a sovrastare la colonna rossa e in alcuni casi anche i valori espressi nel grafico.
A quanto mi è stato riferito IE non rispetta i valori di z-index quando sono applicati a oggetti che non sono figli dello stesso contenitore.

ho fatto alcune prove ma nn riesco a inserire un div dentro l'altro nella maniera corretta in quanto poi il rislutato a video non è quello voluto.

Qualucuno di voi sa come scrivere deve essere scritto il codice per incastonare questi div?


vi invio il codice originale con il div e i td:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Statistiche</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<style type=text/css>
/* html {
background: #909aa9
}
body {
border-right: gray 3px solid; padding-right: 1em; border-top: gray 0px solid; padding-left: 1em; background: #fff; padding-bottom: 1em; margin: 0px 5%; border-left: gray 3px solid; padding-top: 1em; border-bottom: gray 0px solid
}
*/
h1 {
padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 0px; margin: 1em -0.5em; font: bold 2em/0.85 arial, sans-serif; padding-top: 0px; border-bottom: gray 2px solid; letter-spacing: 1px; text-align: center
}
#q-graph {
border-right: gray 2px solid; padding-right: 0px; border-top: gray 2px solid; display: block; padding-left: 0px; background: url(fade-light.png) #ddd repeat-x; padding-bottom: 0px; z-index: 10;

border-right: #c4c4c4 1px dotted; color: #aaa; padding-top: 2px; height: 296px;vertical-align: top; top: 0.75em

margin: 1.1em 60px 0px;
font: 9px helvetica, geneva, sans-serif; border-left: gray 2px solid; width: 800px; padding-top: 0px; border-bottom: gray 2px solid; position: relative; height: 300px
}
#q-graph caption {
font-weight: bold; z-index: 10; width: 600px; position: relative; caption-side: top
}
#q-graph tr {
padding-right: 0px; padding-left: 0px; z-index: 2; padding-bottom: 0px; margin: 0px; width: 150px; bottom: 0px; padding-top: 0px; position: absolute; text-align: center
}
#q-graph th {
padding-right: 0px; padding-left: 0px; z-index: 2; padding-bottom: 0px; margin: 0px; width: 150px; bottom: 0px; padding-top: 0px; position: absolute; text-align: center
}
#q-graph td {
padding-right: 0px; padding-left: 0px; z-index: 2; padding-bottom: 0px; margin: 0px; width: 150px; bottom: 0px; padding-top: 0px; position: absolute; text-align: center
}

#q-graph tbody tr {
border-right: #c4c4c4 1px dotted; color: #aaa; padding-top: 2px; height: 296px
}

#q-graph tbody th {
vertical-align: top; top: 0.75em
}
#q-graph .bar {
border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; width: 23px; color: #000; border-bottom: 1px
}
#q-graph .bar p {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 5px 0px 0px; padding-top: 0px
}
.tit {position:relative; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: -155px 0px 0px; padding-top: 0px; color:yellow;}
#q-graph .sent {
border-left-color: #edc; background: url(fade-dark.png) /*#dca*/ red repeat-x; left: 13px; border-bottom-color: #000; border-top-color: #edc; border-right-color: #ba9
}
#q-graph .paid {
border-left-color: #bfb; background: url(fade-dark.png) #9d9 repeat-x; left: 77px; border-bottom-color: #000; border-top-color: #cdc; border-right-color: #9b9
}
#ticks {
z-index: 1; left: 60px; margin-bottom: -300px; font: 9px helvetica, geneva, sans-serif; width: 596px; position: relative; top: -300px; height: 300px
}
#ticks .tick {
width: 800px ; border-bottom: #bbb 1px solid; position: relative
}
#ticks .tick p {
left: -30px; margin: 0px 0px 0px 0.5em; position: absolute; top: -0.67em
}
</style>

</head>
<body>


<div id=ticks>

<div class=tick style="height: 59px">

100 %</p></div>
<div class=tick style="height: 59px">

80 %</p></div>
<div class=tick style="height: 59px">

60 %</p></div>
<div class=tick style="height: 59px">

40 %</p></div>
<div class=tick style="height: 59px">

20 %</p></div>

<table id="q-graph" border="1">
<caption>quarterly results</caption>

<tbody>
<tr><td class="sent bar" style="height:180px; left:0px;">

60%</p><p class="tit" style="top:140px;">10</p> </td></tr>
<tr><td class="sent bar" style="height:180px; left:20px;">

60%</p><p class="tit" style="top:140px;">10</p> </td></tr>
<tr><td class="sent bar" style="height:60px; left:40px;">

20%</p><p class="tit" style="top:20px;">10</p> </td></tr>


</tbody>
</table>
</div>

</body></html>

grazie per l'attenzione
Ivo