• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1583
  • Last Modified:

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

0
agrees
Asked:
agrees
1 Solution
 
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
 
agreesAuthor Commented:
Thanks a lot.  I actually didn't realise you could add the display attribute to elements other than divs!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now