Forum Moderators: not2easy
Any fix or work around is greatly appreciated.
My best guess is it is some timing issue due to complexity of the page.
Other <div> content and there are many all show up except this one which needs to be turned on and off using js.
Simplified code with domains starred out:
<HTML>
<HEAD><link rel="stylesheet" type="text/css" href="css/hcstyle.css" />
<SCRIPT LANGUAGE="JavaScript" SRC="css/clrs.js"></SCRIPT><SCRIPT LANGUAGE="JavaScript">
function subp1() {
document.getElementById('par1').style.visibility='visible';
topbotton1=topbotton1;
topbotton1b=topbotton1;
document.getElementById('toparrow').style.left ='25%';
}</script>
</HEAD>
<HTML><BODY TEXT="#000000" background="gif/bak.gif" LINK="#1a24cc" VLINK="#1a24cc" ALINK="#1a24cc" ><div id="par1" style="position:relative; top:-19px; visibility:visible; ">
<IMG SRC="http://www.****.net/images/CTFCA_Header.jpg" ALT="text" width="449" height="115" HSPACE=0 BORDER=0 >
<font color="#448ccb" face="arial" size="2"><h1>text</h1></font>
<font color="black" face="arial" size="3">
<b><u>Mandate:</u></b>
<br><br>
Some text here
<br>
<center><b>
<A HREF="http://www.******.net/PDF/CTFCAWorkPlan.PDF">
Click here text</a>
<br><br>
<A HREF="http://www.*********.net/privatedoc/CTFCA-CAS%20Compendium%20Document.pdf">
Click here text
</a>
</b></center><br>
</font>
</div></BODY></HTML>
ie display: block or display: none
Also the default setting is visible/block so the initial setting is not required.
Thank you for the reply.
Just to make sure that I understand you correctly.
You are implying that the visibility property is vulnerable to this bug and the display property is not. Is this correct?
Thanks again for the prompt reply.
So you need to post any external CSS from hcstyle.cs which relates to the elements on this page, and the same goes for clrs.js. This way we can see the whole picture, and potentially run a local copy of your page. And be prepared for someone to tell you your code's a mess.
I suggested to a1call that posting in the CSS forum would be best, as things appearing and disappearing in IE sounds like the kind of thing you lot should be able nail down with ease. ;)
a1call, for starters, is there any change if you give your par1 div layout, by applying a dimension to it? How about width: 100%;
I am grateful for your help. As for the messy code, you should have seen it before I cleaned it up:) Good or wrong it relates to my philosophy of not putting more effort into organizing than absolutely necessary. The other excuse is that the site is constantly being modified.
Here are the complete external codes:
hcstyle.css:
.cpnlindex { font-size:8pt; font-weight:bold;font-family: arial, times;text-decoration: none; color:white}
.cpnl { font-size:8pt; font-weight:bold;font-family: arial, times;text-decoration: none; color:black}
.cpnlbig { font-size:16pt; font-weight:bold; color:white}
.cpnlsmaller { font-size:10pt; font-weight:bold; }
.heading { font-size:14pt; font-weight:bold; color:white; direction: rtl}
.ttitle { font-size:9pt; font-weight:bold; color:white; direction: rtl;font-family: arial, times;}
.ttitlebig { font-size:16pt; font-weight:bold; color:white; direction: rtl;font-family: arial, times;}
.cpnlsmallerw { font-size:10pt; font-weight:bold; color:white }v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}.maintable{ border-style: ridge; border-width:5px; border-color: #00ff00 ;height:50}
.maintable2{ border-style: ridge; border-width:5px; border-color: #749cdc ;height:700}
.maintable2b{ border-style: ridge; border-width:5px; border-color: #749cdc ;height:1500}
.maintable2c{ border-style: ridge; border-width:5px; border-color: #749cdc ;height:1000}
.maintable3{ border-style: ridge; border-width:5px; border-color: #749cdc ;height:50}
.unmaintable{ border-style: ridge; border-width:5px; border-color: #00ff00 ; background-color:#448ccb; color: white;}
In above the middle codes are from an older time and are currently unnecessary.
clrs.js:
topbotton1='#448ccb';
topbotton2='#448ccb';
topbotton3='#448ccb';
topbotton4='#448ccb';
topbotton1b='#448ccb';
btover='#4c6d8c';
It would be hard for me to judge if any modifications would make a difference because the phenomena (for want of a better word) is somewhat random and usually observed when loading the first time ever or first time in a while (I cleared the browser's cache and loaded without a problem). In fact that is the reason behind the redundant visibility set to visible which still fails sometime.
I did change one of the 19 pages involved to "display" property rather than "visibility". I will report if this has made a difference. I will also experiment with dimensions and report later. In the meantime should someone have eureka moment please let me know.
Thanks everyone for your time.
Assuming this is not a bug (which is usually the best approach), I would guess that the div isn't showing because the JS/styling wires are being crossed somewhere. In other words, dynamically messing around with the visibility (or display) of an element runs the risk of making that element disappear. Specifically, I'm wondering if the hiding function is being triggered somehow when the page loads, then on reload the showing function trips and makes the div pop back in. I've seen this happen with JS scripts where the property being altered is not declared in the CSS before the script fires.
Given the fact there doesn't appear to be any complicated positioning going on (the CSS is all font related, relative positioning is the only css-p stuff), I don't think this is being caused by the CSS. It's not uncommon for IE to hide content as a result of it's twitchy CSS support, but in almost every case of that happening there is a floated element involved. Unless there's CSS that we're not seeing, that isn't the case here.
you should use display css tag rather than visibility
The difference between display and visibility is in how the browser handles the allocation of layout space to the element. When an element is set to display:none, no space is reserved in the layout for that element. The rest of the page element acts as if the element did not exist at all. When an element is set to visibility:hidden, the element does not show, but it's space is reserved in the layout. Other elements flow around it as if it were there, despite it's content not being drawn on the page.
cEM
Thank you for your attention to this post.
The site has 19 pages and my boss wanted no scrolling being required so I divided the long pages into many paragraphs and made some text links that when clicked would turn all paragraphs off and would turn just the associated paragraph on.
This is the general setup of all pages(copy, paste:)). On one of the pages containing only 2 paragraphs I recently made modifications such that now there is only one paragraph. In other words on one of the pages the code to turn on the paragraph and it's link is still there, but there is no way to turn anything off(unnecessary code but useful for debugging). I made a text search for the word "hidden" on this page and none was found.
Yet this particular page still failed to show par1 when a colleague loaded it today. after refresh par1 showed up.
Again one hint might be that pages are very taxing on the browser's js interpreter with a lot of mouseover functions.
Try removing all the JS from the page, clear the browser cache and load. If you can't reproduce the problem, it's a pretty good bet the JS is to blame.
Ditto with the CSS. Although I really don't think this is a CSS issue (unless there is other CSS code we haven't seen), it's worth a shot. Delink the external file, remove the inline styling and see what happens. If the page doesn't load right with the JS in but the CSS out, we know to take a closer look at the CSS.
Otherwise, look into the possibility that it's server related?
cEM
