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?
 
Tomarse111Connect With a Mentor Commented:
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
 
agreesAuthor Commented:
Thanks a lot.  I actually didn't realise you could add the display attribute to elements other than divs!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.