claracruz
asked on
Visibility hidden problem in IE7
Hi Experts,
I have a strange problem in IE7.
I have a table generated via javascript when the window loads, the table sits within a div like so (see attached code);-
In CSS, I'm setting border colors on cells like so for example;-
td{border-top:1px solid #7F7F7F;} ..e.t.c
When the page loads, I am setting the visiblity of the container div to visibility hidden:-
#contentPanel{
visibility:hidden;
}
But the problem is that I can see the oulines of the border colors i set for the table though the content isn't visible (see attached image file).
Any ideas...?
I have a strange problem in IE7.
I have a table generated via javascript when the window loads, the table sits within a div like so (see attached code);-
In CSS, I'm setting border colors on cells like so for example;-
td{border-top:1px solid #7F7F7F;} ..e.t.c
When the page loads, I am setting the visiblity of the container div to visibility hidden:-
#contentPanel{
visibility:hidden;
}
But the problem is that I can see the oulines of the border colors i set for the table though the content isn't visible (see attached image file).
Any ideas...?
<div id="contentPanel">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
img.png
Instead of:
#contentPanel{
visibility:hidden;
}
Try:
#contentPanel{
display: none;
}
#contentPanel{
visibility:hidden;
}
Try:
#contentPanel{
display: none;
}
Could you post the script you're using to generate the table please, as I've tested exactly what you have posted (See below) and I get no border when the div is invisible, in IE7 or FF3.
<style type="text/css">
td{border-top:1px solid #7F7F7F;}
#contentPanel{
visibility:hidden;
}
</style>
<div id="contentPanel">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
ASKER
Its actually the YUI library i'm using to generate a datatable - http://developer.yahoo.com/yui/datatable/
The markup and CSS produced looks like the following;-http://developer.yahoo.com/yui/examples/datatable/dt_skinning.html.
Even without making any adjustments to the css styles, the table borders that are defined in CSS are visible when the div container is set to hidden.
I can't really use the display none, as it cuses the panel to lose its centering (The contentPanel div is used by YUI library to display a modal overlay on the page ( a pop-up) that needs to be centered absolutely on the page. If display:none is set, then centering the popup becomes a problem.
Setting border to none will have to be a last resort I think, as there are also two calendar widgets that are giving the same troublem.
Thanks.
The markup and CSS produced looks like the following;-http://developer.yahoo.com/yui/examples/datatable/dt_skinning.html.
Even without making any adjustments to the css styles, the table borders that are defined in CSS are visible when the div container is set to hidden.
I can't really use the display none, as it cuses the panel to lose its centering (The contentPanel div is used by YUI library to display a modal overlay on the page ( a pop-up) that needs to be centered absolutely on the page. If display:none is set, then centering the popup becomes a problem.
Setting border to none will have to be a last resort I think, as there are also two calendar widgets that are giving the same troublem.
Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
any ideas how best I can do that..
many thanks..
many thanks..
Why are you enlcosing a TABLE inside a DIV? If you are using this to style or limit the SIZE and action of the table, you are making a coding mistake. You can use the DIV to POSITION the table, that is fine, but if you are trying to control how the table functions with the DIV, this is where your problem is. REMOVE the DIV around the table, and watch the table work correctly, and the problems disappear. You can STYLE ANY element of a table that you want with CSS, there is no need to use a DIV to try to limit it -- usually doesn't work.
Maybe you should use border: none; until the page has loaded.