IE Display issue when using 'none' display style

Hi all,

The problem I'm having can be seen by viewing the attached code using IE 7.

If the first two rows are hidden, a small gap appears between the remaining row and the table headers. (Rows are hidden by putting the row number into the box labeled "Hide Div #:", then pressing the 'hide' button.)

Conversely, if you hide rows 2 and 3, the border of the remaining row extends a couple of pixels down on the right hand side.

I don't get this problem using Firefox.  Can anyone explain whats causing this and suggest a solution?

Thanks for any help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
 
table.standard-table {    
    margin:             10px 10px 10px 10px;
    height:             0px;
    border-style:       solid;
    border-width:       1px;
    border-color:       #000000;
    border-spacing: 	0pt;
    border-width: 		1px 1px 0px 0px;
    border-collapse:	collapse;
}
 
.standard-table th{
    font-family:        helvetica,sans-serif;
    font-size:          10pt;
    color:              #303030;
    background-color:   #B4D1EA;
    text-align:         center;
    font-weight:        bold;
    padding:            5px 0px 5px 0px;
    border-style:       solid;
    border-width: 		0px 0px 1px 1px;
    border-color:       #000000;
 
}
 
.standard-table td{
    font-family:        helvetica,sans-serif;
    font-size:          10pt;
    color:              #404040;
    background-color:   #FFFFFF;
    padding:            0px 0px 0px 0px;
    text-align:         center;
    border-style:       solid;
    border-width: 		0px 0px 1px 1px;
    border-color:       #000000;
}
 
td.layout-only {
	border-width: 		0px 0px 0px 0px;
}
th.layout-only {
	border-width: 		0px 0px 0px 0px;
}
table.layout-only {
	border-width: 		0px 0px 0px 0px;
	border-collapse:	collapse;
}
 
 
</style>
</head>
<body>
Hide Div #: <input type="text" id="hideInput" /><input type="button" value="Hide" onclick="document.getElementById('div'+document.getElementById('hideInput').value).style.display = 'none';" /><br />
Show Div #: <input type="text" id="showInput" /><input type="button" value="Show" onclick="document.getElementById('div'+document.getElementById('showInput').value).style.display = 'block';" /><br />
 
<table class="standard-table">
	<tr>
		<td class="layout-only">
			<div>
			<table class="layout-only">
                <tr>
					<th width="100px" max-width="100px">Instance</th>
					<th width="220px" max-width="220px">Message Type</th> 
					<th width="100px" max-width="100px">Enabled</th>
				</tr>
			</table>
			</div>
		</td>
	</tr>
	<tr colspan="3">
		<td class="layout-only">
			<div id="div1">
			<table class="layout-only">
				<tr>
					<td width="100px" max-width="100px">1</td>
					<td width="220px" max-width="220px">blah</td>                                            
					<td width="100px"><input type="checkbox"></td>    
				</tr>
			</table>
			</div>
		</td>
	</tr>
	<tr colspan="3">
		<td class="layout-only">
			<div id="div2">
			<table class="layout-only">
				<tr>
					<td width="100px" max-width="100px">2</td>
					<td width="220px" max-width="220px">blah2</td>                                            
					<td width="100px"><input type="checkbox"></td>    
				</tr>
			</table>
			</div>
		</td>
	</tr>
	<tr colspan="3">
		<td class="layout-only">
			<div id="div3">
			<table class="layout-only">
				<tr>
					<td width="100px" max-width="100px">3</td>
					<td width="220px" max-width="220px">blah3</td>                                            
					<td width="100px"><input type="checkbox"></td>    
				</tr>
			</table>
			</div>
		</td>
	</tr>
		
</table>
</body>
</html>

Open in new window

agreesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tomarse111Commented:
Its because when you hide the div around the table it still leaves the <td> above and it leaves it empty. IE doesn't seem to like this for some reason and shows a pixel high empty <td>.

To counter this you need to hide the the actual <tr> above the individual tables foe example see below:

Notice the id's are now on the actual <tr>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
 
table.standard-table {    
    margin:             10px 10px 10px 10px;
    height:             0px;
    border-style:       solid;
    border-width:       1px;
    border-color:       #000000;
    border-spacing:     0pt;
    border-width:               1px 1px 0px 0px;
    border-collapse:    collapse;
}
 
.standard-table th{
    font-family:        helvetica,sans-serif;
    font-size:          10pt;
    color:              #303030;
    background-color:   #B4D1EA;
    text-align:         center;
    font-weight:        bold;
    padding:            5px 0px 5px 0px;
    border-style:       solid;
    border-width:       0px 0px 1px 1px;
    border-color:       #000000;
 
}
 
.standard-table td{
    font-family:        helvetica,sans-serif;
    font-size:          10pt;
    color:              #404040;
    background-color:   #FFFFFF;
    padding:            0px 0px 0px 0px;
    text-align:         center;
    border-style:       solid;
    border-width:               0px 0px 1px 1px;
    border-color:       #000000;
}
 
td.layout-only {
        border-width:           0px 0px 0px 0px;
}
th.layout-only {
        border-width:           0px 0px 0px 0px;
}
table.layout-only {
        border-width:           0px 0px 0px 0px;
        border-collapse:        collapse;
}
 
 
</style>
</head>
<body>
Hide Div #: <input type="text" id="hideInput" /><input type="button" value="Hide" onclick="document.getElementById('div'+document.getElementById('hideInput').value).style.display = 'none';" /><br />
Show Div #: <input type="text" id="showInput" /><input type="button" value="Show" onclick="document.getElementById('div'+document.getElementById('showInput').value).style.display = '';" /><br />
 
<table class="standard-table">
    <tr>
        <td class="layout-only">
            <div>
            <table class="layout-only">
                 <tr>
                    <th width="100px" max-width="100px">Instance</th>
                    <th width="220px" max-width="220px">Message Type</th> 
                    <th width="100px" max-width="100px">Enabled</th>
                </tr>
            </table>
            </div>
        </td>
    </tr>    
    <tr colspan="3" id="div1">        
        <td class="layout-only">                   
            <table class="layout-only">
                <tr>
                    <td width="100px" max-width="100px">1</td>
                    <td width="220px" max-width="220px">blah</td>                                            
                    <td width="100px"><input type="checkbox"></td>    
                </tr>
            </table>                    
        </td>                
    </tr>     
    <tr colspan="3"  id="div2">
        <td class="layout-only">
            <table class="layout-only">
                <tr>
                    <td width="100px" max-width="100px">2</td>
                    <td width="220px" max-width="220px">blah2</td>                                            
                    <td width="100px"><input type="checkbox"></td>    
                </tr>
            </table>                       
        </td>
    </tr>
    <tr colspan="3" id="div3">
        <td class="layout-only">
            <table class="layout-only">
                <tr>
                    <td width="100px" max-width="100px">3</td>
                    <td width="220px" max-width="220px">blah3</td>                                            
                    <td width="100px"><input type="checkbox"></td>    
                </tr>
            </table>               
        </td>
    </tr>                
</table>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
agreesAuthor Commented:
Thanks a lot.  I actually didn't realise you could add the display attribute to elements other than divs!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.