Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Visibility hidden problem in IE7

Posted on 2008-11-03
7
4,104 Views
Last Modified: 2013-12-08
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...?


<div id="contentPanel">
<table>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
</table>
</div>

Open in new window

img.png
0
Comment
Question by:claracruz
7 Comments
 
LVL 7

Expert Comment

by:brucepieterse
ID: 22865826
Hi!

Maybe you should use border: none; until the page has loaded.

0
 
LVL 6

Expert Comment

by:dwaynecharrington
ID: 22865832
Instead of:

#contentPanel{
   visibility:hidden;
}
Try:
#contentPanel{
   display: none;
}
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22865837
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>

Open in new window

0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 4

Author Comment

by:claracruz
ID: 22866291
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.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 22866718
They're jumping through hoops at the moment to deal with removing cellspacing="0" from the markup. Try putting it back in until IE6 users disappear - perhaps that might help?

<div id="contentPanel">
<table cellspacing="0">

/* basic skin styles */ 
2 .yui-skin-sam .yui-dt table {  
3     ....... 
5     border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */  
6     border:1px solid #7F7F7F;   
7 } 
8 .yui-skin-sam .yui-dt thead {border-spacing:0;} /* for safari bug */ 

Open in new window

0
 
LVL 4

Author Comment

by:claracruz
ID: 22868445
any ideas how best I can do that..

many thanks..
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22872943
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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
google exe file 5 68
Html fieldset fix its height and width 4 32
message Alert on an empty search 10 22
Make footer stick to bottom 6 18
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question