lpdlcn66
05-28-2003, 02:37 AM
The following code works very well with the Opera browser, but it doesn't work with Internet Explorer, because this browser doesn't support the instruction 'position: fixed' in the CSS <table> definition.How can I obtain the same result as Opera with IE?
<html>
<head>
<script type="text/javascript">
function _Italy(){
var _head = "Italy"
var _templ = new Array("Palermo","Genova","Torino","Napoli","Milano","Roma","Catania","L'Aquila","Bologna","Pescara")
show(_templ,_head)
}
function _Germany(){
var _head = "Germany"
var _templ = new Array("Berlin","Frankfurt","Munchen","Bonn","Lipsia","Dresda","Koln")
show(_templ,_head)
}
function _France(){
var _head = "France"
var _templ = new Array("Paris","Marseille","Nice","Aiaccio","Lilla","Reims","Bordeaux")
show(_templ,_head)
}
function _England(){
var _head = "England"
var _templ = new Array("London","Manchester","Leeds","Birmingham","Coventry","Cambridge","Oxford")
show(_templ,_head)
}
function show(templ,head){
unshow()
for (i=0; i<templ.length; i++){
var r=myTable.insertRow(0)
var c=r.insertCell(0)
var hr1="<i>"+templ[i]+"</i>"
c.innerHTML=hr1
i++
}
var r=myTable.insertRow(0)
var c=r.insertCell(0)
var hr2="<strong onmouseover=\"unshow()\">"+head+"</strong>"
c.innerHTML=hr2
}
function unshow(){
var r=myTable.rows
for (i=r.length-1; i>=0; i--){
var rr=r[i].rowIndex
myTable.deleteRow(rr)
}
}
</script>
<style type="text/css">
body {background-color: #EEEEDD}
a{color: #ff0000; font-weight: bold}
a:hover{background: #FFFFDD}
table{position: fixed;top: 60px;right: 10px;width: 1px}
td{background-color:#87CEFA}
strong{color: #6A5ACD}
</style>
</head>
<body>
<table id="myTable">
</table>
<a name="I" onmouseover="_Italy()">Italy</a>
<pre>
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
</pre>
<hr>
<a name="F" onmouseover="_France()">France</a>
<pre>
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
</pre>
<hr>
<a name="G" onmouseover="_Germany()">Germany</a>
<pre>
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
</pre>
<hr>
<a name="E" onmouseover="_England()">England</a>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function _Italy(){
var _head = "Italy"
var _templ = new Array("Palermo","Genova","Torino","Napoli","Milano","Roma","Catania","L'Aquila","Bologna","Pescara")
show(_templ,_head)
}
function _Germany(){
var _head = "Germany"
var _templ = new Array("Berlin","Frankfurt","Munchen","Bonn","Lipsia","Dresda","Koln")
show(_templ,_head)
}
function _France(){
var _head = "France"
var _templ = new Array("Paris","Marseille","Nice","Aiaccio","Lilla","Reims","Bordeaux")
show(_templ,_head)
}
function _England(){
var _head = "England"
var _templ = new Array("London","Manchester","Leeds","Birmingham","Coventry","Cambridge","Oxford")
show(_templ,_head)
}
function show(templ,head){
unshow()
for (i=0; i<templ.length; i++){
var r=myTable.insertRow(0)
var c=r.insertCell(0)
var hr1="<i>"+templ[i]+"</i>"
c.innerHTML=hr1
i++
}
var r=myTable.insertRow(0)
var c=r.insertCell(0)
var hr2="<strong onmouseover=\"unshow()\">"+head+"</strong>"
c.innerHTML=hr2
}
function unshow(){
var r=myTable.rows
for (i=r.length-1; i>=0; i--){
var rr=r[i].rowIndex
myTable.deleteRow(rr)
}
}
</script>
<style type="text/css">
body {background-color: #EEEEDD}
a{color: #ff0000; font-weight: bold}
a:hover{background: #FFFFDD}
table{position: fixed;top: 60px;right: 10px;width: 1px}
td{background-color:#87CEFA}
strong{color: #6A5ACD}
</style>
</head>
<body>
<table id="myTable">
</table>
<a name="I" onmouseover="_Italy()">Italy</a>
<pre>
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
</pre>
<hr>
<a name="F" onmouseover="_France()">France</a>
<pre>
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
s
</pre>
<hr>
<a name="G" onmouseover="_Germany()">Germany</a>
<pre>
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
</pre>
<hr>
<a name="E" onmouseover="_England()">England</a>
</body>
</html>