Member Avatar for gvsmani

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 because: fixed formatting
  • 2 Contributors
  • 3 Replies
  • 70 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

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.

Member Avatar for gvsmani

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

Member Avatar for MidiMagic

One more thing. The "type" attribute should be "text/css", not "text/CSS".

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.