Table spacing keep decreasing on right side on Firefox

T

Thierry Lam

For the following codes, if you continuously check the checkbox, the
space on the right side keep decreasing dynamically on Firefox
1.5.0.10 while you don't see such behaviour on IE 6.0.2900, does
anyone know why and how to fix it?

<html>
<head>
<style type="text/css">
table.simple
{
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}

table.sample th, tr, td
{
border-width: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
border-style: inset inset inset inset;
border-color: gray gray gray gray;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}


</style>
<title>Simple doc</title>
</head>
<body>
<script type="text/javascript">

function greet(checked)
{
var table = document.getElementById("greetTable");
var cell = table.rows[0].cells[1];
if (checked)
cell.style.display = "block";
else
cell.style.display = "none";
}

</script>
<input type="checkbox" name="greet" onClick="greet(checked)"/>Key
Greet
<table class="simple" id="greetTable">
<tr>
<td>Hello</td>
<td>
<div id="first">
<input type="button" value="hello world" onClick="say()" />
</div>
<div id="second">
Text Only
</div>
</td>
</tr>
</table>
</body>
</html>
 
J

Jonathan N. Little

Thierry said:
For the following codes, if you continuously check the checkbox, the
space on the right side keep decreasing dynamically on Firefox
1.5.0.10 while you don't see such behaviour on IE 6.0.2900, does
anyone know why and how to fix it?
<snip>

Because to toggle a table cell from displaying or not should be:

if (checked){
cell.style.display = "table-cell";
}
else{
cell.style.display = "none";
}

Note:
'display: block' != 'display: table-cell'

But yeah, you guessed it didn't you? IE at least to version 6 does not
support "table-cell" so you have to browser sniff here and use 'block'
for IE...

Or not use a table...
 
T

Thierry Lam

Thanks for that tinfo, those browser specific exceptions are pretty
annoying in deploying web apps.
 
J

Jonathan N. Little

Thierry said:
Thanks for that tinfo, those browser specific exceptions are pretty
annoying in deploying web apps.

Tell me about it, just been chasing my on backside of a bug narrowly
focused to IE6 on WinXP! 90% of my bug chasing involves IE...
 
B

BootNic

Thierry Lam said:
news: (e-mail address removed)
For the following codes, if you continuously check the checkbox, the
space on the right side keep decreasing dynamically on Firefox
1.5.0.10 while you don't see such behaviour on IE 6.0.2900, does
anyone know why and how to fix it?
[snip]

Start with a valid document. After you have that you can work on
the javascript, and at some point you will get to where you wish
to toggle the display of a cell on or off. The values of which
would be "none" or "".

table[0].tbody[0].rows[0].cells[1].style.display="none";
table[0].tbody[0].rows[0].cells[1].style.display="";
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,999
Messages
2,570,246
Members
46,839
Latest member
MartinaBur

Latest Threads

Top