I just wanted to ask the following :
Why does table behave in a strange way in different browsers? Is this behavior same with other tags? Even my data, though being repeatedly centered doesn't displays the way it should.Is something wrong with the way I used 'test-align'? (I have not found out yet any differences with other tags)
When I try to put an 'id' attribute in <td element> why does it appears to behave like a block element?
How can I change the onMOuseOut so that it does not close until my mouse is out from the option that are displayed?
body {
margin:0px;
padding:0px
}
#header {
height:150px;
background-color:green;
margin:10px;
}
#navbar {
height:60px;
background-color:teal;
text-align:center;
margin:10px;
padding:0px;
}
#hlink1{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}
#hlink2{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}
#hlink3{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}
#hlink1:hover{
background-color:aqua;
text-align:center;
}
#hlink2:hover{
background-color:aqua;
text-align:center;
}
#hlink3:hover{
background-color:aqua;
text-align:center;
}
table {
width:100%;
border-collapse: collapse;
text-align:center;
}
#data3 {
background-color:lime;
padding:5px;
height:0px;
display:none;
}
#data2 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}
#data1 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}
.inn:hover{
background-color:aqua;
}<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<div id="header">
</div>
<div id="navbar">
<table>
<th onMouseOver="document.getElementById('data1').style.display='inline';" onMouseOut="document.getElementById('data1').style.display='none';">
<div id="hlink1">Heading_Link1</div>
</th>
<th onMouseOver="document.getElementById('data2').style.display='inline';" onMouseOut="document.getElementById('data2').style.display='none';">
<div id="hlink2">Heading_Link2</div>
</th>
<th onMouseOver="document.getElementById('data3').style.display='inline';" onMouseOut="document.getElementById('data3').style.display='none';">
<div id="hlink3">Heading_link3</div>
</th>
<tr>
<td colspan="1">
<table id="data1">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</td>
<td>
<table id="data2">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</td>
<td>
<table id="data3">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>You should not try to change the display value of a table without also changing the display values of the structure inside it. While not technically an error, this amounts to putting a tr inside a span; which the browsers apparently handle differently.
Now if you change the mouseover events to read
document.getElementById('data1').style.display='table';
they will act the same in all browsers.
As for point 3, that may require a little change in structure. Currently, the data tables are in different rows than the hover rows, so they don't influence each other. If you put those data tables directly inside the header cells, it's much easier to do the hovering; you won't even need the JavaScript events.
<th>
<div id="hlink1">Heading_Link1</div>
<table id="data1">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</th>
And the CSS:
#navbar th:hover table {
display:table
}
No need to spell out all the onmouseover actions in each of the header cells!
body {
margin:0px;
padding:0px
}
#header {
height:150px;
background-color:green;
margin:10px;
}
#navbar {
height:60px;
background-color:teal;
text-align:center;
margin:10px;
padding:0px;
}
#hlink1, #hlink2, #hlink3 {
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}
#hlink1:hover, #hlink2:hover, #hlink3:hover{
background-color:aqua;
}
table {
width:100%;
border-collapse: collapse;
text-align:center;
}
#data1, #data2, #data3 {
background-color:lime;
padding:5px;
display:none;
}
.inn:hover{
background-color:aqua;
}
#navbar th {
vertical-align:top;
}
#navbar th:hover table {
display:table
}<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<div id="header">
</div>
<div id="navbar">
<table>
<th>
<div id="hlink1">Heading_Link1</div>
<table id="data1">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</th>
<th>
<div id="hlink2">Heading_Link2</div>
<table id="data2">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</th>
<th>
<div id="hlink3">Heading_link3</div>
<table id="data3">
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
<tr><td class="inn">data</td></tr>
</table>
</th>
</table>
</div>
</body>
</html>