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
  • 85 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A few practical points that should fix the Firefox expansion problem seen here.

The main cause is treating table sections as regular block boxes. Remove tbody { display: block } from the CSS. Making a tbody block breaks the browser table layout model and will cause rows to wrap/expand in standards-compliant browsers like Firefox. Fix the initial-hide loop (it uses locl.style instead of locl[i].style) and toggle the correct display value for a table section (table-row-group) instead of block. See the spec notes on the tbody element and the display property for why this matters: tbody element and display.

Example fixes (minimal):

document.addEventListener('DOMContentLoaded', function () {
  var tbodies = document.getElementsByTagName('tbody');
  for (var i = 0; i < tbodies.length; i++) {
    tbodies[i].style.display = 'none';
  }
});

function showHide(id, markerId) {
  var el = document.getElementById(id);
  var marker = document.getElementById(markerId);
  if (el.style.display === 'none') {
    marker.textContent = ' - ';
    el.style.display = 'table-row-group';
  } else {
    marker.textContent = ' + ';
    el.style.display = 'none';
  }
}

A cleaner approach is class-based toggling: define .collapsed { display: none; } in CSS and toggle that class with el.classList.toggle('collapsed'). Also follow 's small note about the type attribute on the style tag (text/css), and prefer textContent over innerHTML for simple text toggles for performance and safety.

Recommended Answers

All 3 Replies

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.