Forum Moderators: not2easy
function show() {
document.getElementById("tblCustom").style.display = '';
}
function hide() {
document.getElementById("tblCustom").style.display = 'none';
}
Now, when I load up my form and when the table is not display, I get a 1 px space right where the table should be. How can I get rid of it?
Note that this is pure speculation, but it's based on the behavior of the following test page. Load it up and test your scripts and the gap you describe is clearly there. Then uncomment the *{margin:0;padding:0;} line in the <style> tag and try the page again. No gap when the table switches to display none.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
/*uncomment this to remove the spacing
*{margin:0;padding:0;}
*/
body{font:80%/1.5 Verdana, Arial, Helvetica, sans-serif;background:#000;}
#tblbox{background:#963;width:400px;}
#tblCustom{width:200px;margin:0 auto;background:#396;}
p{border-top:1px solid #f60;}</style>
<script type="text/javascript">
function show() {document.getElementById("tblCustom").style.display = '';}
function hide() {document.getElementById("tblCustom").style.display = 'none';}
</script>
</head>
<body>
<div id="tblbox">
<table id="tblCustom"><tr>
<td><p>blah blah</p></td>
</tr></table>
<p><a href="javascript:show();">Show</a> ¦ <a href="javascript:hide();">Hide</a></p>
</div>
</body>
</html>
So try playing around with the top margin on whatever follows the table (or the bottom margin on whatever comes before it) and see if gives you control over that gap.
cEM
<tr style="margin:0;padding:0;">
<td height="27" class="cellleft"> </td>
<td class="label" align="right">
Custom:
</td>
<td class="cellright" align="middle">
<html:radio property="permissions" value="custom" onclick="javascript:show();" />
</td>
</tr>
<tr style="margin:0;padding:0;">
<td colspan="3">
<table align="center" name="tblCustom" id="tblCustom" style="width:650;margin:0;padding:0;" cellpadding="0" cellspacing="0">
<tr>
<td height="27" class="celltopL" width="7"> </td>
<td class="celltop" align="left" width="571">
<span style="font: small-caps">Customized Permissions</span>
</td>
<td class="celltopRalt" align="middle" width="72">
<span style="font: small-caps">Access</span>
</td>
</tr>
<tr>
<td height="27" class="cellleft"> </td>
<td class="label" align="right">
Zelimir Koljesar:
</td>
<td class="cellright" align="middle">
<html:checkbox property="customize" value="Zelimir Koljesar" />
</td>
</tr>
<tr>
<td height="27" class="cellleft"> </td>
<td class="label" align="right">
James Hatton:
</td>
<td class="cellright" align="middle">
<html:checkbox property="customize" value="James Hatton" />
</td>
</tr>
<tr>
<td height="27" class="cellleft"> </td>
<td class="label" align="right">
Sean Wall:
</td>
<td class="cellright" align="middle">
<html:checkbox property="customize" value="Sean Wall" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td height="2" colspan="2" class="cellbottomL" width="577"> </td>
<td height="2" colspan="1" class="cellbottomR" align="right" valign="middle" width="73">
</td>
</tr>
Here take a look at it
I replaced the <tr> in my test page with the table data you just posted, uncommented the *{margin:0;padding:0;} (which removed margin and padding from everything on the page) and it behaved exactly the same. No extra space left where the table was once the JS switches the table to display:none.
If you're not using a DOCTYPE on your page, that could yeild you some wonky results, but otherwise I'm convinced it's a margin or padding setting somewhere. Remember that there are instances where margins collapse through a parent container, so while you might zero the margin on a div, for instance, the margin on the <p> inside of that div can still effect elements around it.
Did you try removing ALL margins and padding from the page? Doing so will tell you conclusively whether or not margins are to blame. Just remember that if your layout has explicit margins set anywhere, they may override the * selector, which is very non-specific. If there are any non-zero margin settings, remove them manually, add the * bit from above, and see what happens.
I'm only pushing this point because it solves the problem in the test page. If the behavior you're experiencing is different from the behavior demonstrated by the test page, give us some more information about what's happening. What does the space look like? Is it the same in all browsers? Does it even show up in all browsers? Does the space fill in with a background color? Whose background color is it? The tables? The parent container's? The body's? Does the page have a DOCTYPE? Which one? More information might make things a little clearer.
cEM
