0

Hi all,

I have an HTML/Css code, for display of Collapsible Data.
While the Data grid/table looks neat and good in IE, it is not so in FireFox. Furter in FF, each row height keeps expanding, on usage of
the collapsible marker .... Can anyone help me in fixing this issue, so the FF display is as good as IE display ? The code is attached here for your look - Thanks again.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/CSS">
table {
position:relative;
left: 25%;
width:50%;
border-collapse:collapse;
border:2px solid silver;
}
tbody {
display:block
}
th {
font-weight:normal;
text-align:left;
font-size:9pt;
}
td {
text-align:center;
padding:8px;
border:1px solid silver; }
.linkspan {
color:gold;
background-color:blue;
font-weight:bold;
text-decoration:none;
padding:0 2px;
font-size:1.2em;
margin:right:3px;
}
.vis {
display:block;
}
</style>


<script type="text/javascript">
var ELpntr=false;
function hideall()
{
locl = document.getElementsByTagName('tbody');
for (i=0;i<locl.length;i++)
{
locl.style.display='none';
}
}


function showHide(EL,PM)
{
ELpntr=document.getElementById(EL);
if (ELpntr.style.display=='none')
{
document.getElementById(PM).innerHTML=' - ';
ELpntr.style.display='block';
}
else
{
document.getElementById(PM).innerHTML=' + ';
ELpntr.style.display='none';
}
}
onload=hideall;
</script>
</head>
<body>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#"
onclick="showHide('fruit','fruitspan')">
<span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr>
</thead>
<tbody id="fruit">
<tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr>
<tr> <td> Pear</td><td> Green</td><td> Firm</td></tr>
<tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')">
<span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr>
</thead>
<tbody id="vegtable">
<tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr>
<tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr>
<tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')">
<span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr>
</thead>
<tbody id="animal">
<tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr>
<tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr>
<tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr>
</tbody>
</table>
</body>
</html>

Edited by happygeek: fixed formatting

2
Contributors
3
Replies
4
Views
10 Years
Discussion Span
Last Post by MidiMagic
0

There are fundamental differences between the way IE displays box objects and the way Firefox displays them.

Firefox obeys the standards, and places the margin, border, and padding OUTSIDE the defined size of a box object.

On the other hand, IE crams hem all inside the box object's defined size.

The trick is to not use margin, border, or padding on a box object you plan to define the size of. Instead, nest another box object inside or outside the one with the defined size, so you can put your margin, border, and padding where you want them.

0

Thanks MidiMagic. U hit it right for my collapsible issue. Thanks again.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.