Mike T. successfully answered Adam Thorsen's question:

I'm working on a form that, although it displays with no issues in Firefox, in IE all of the text in the div disappears when the div style is set to visible. The text reappears when selected with the mouse, or when scrolled off the screen and then scrolled back on.

The input fields and select box display just fine.

People succeed in answering Adam Thorsen's questions 47% of the time (24 successes in 51 attempts).

Answers by: Mike T.

Mike T.'s Answer:

Reply by Mike T. 748 days ago

I am assuming when you say "when the div style is set to visible", you mean it is set by javascript, i.e.:


<div id="mydiv" style="visibility:hidden">

...

some content

...

</div>

<script><!--//

var me = document.getElementById('mydiv');

if (me)

{

  me.style.visibility = "visible";

}

//--></script>

Rather than use the 'visibility' style use 'display:none' and 'display:block' to hide or show, respectively, i.e.:


<div id="mydiv" style="display:none">

...

some content

...

</div>

<script><!--//

var me = document.getElementById('mydiv');

if (me)

{

  me.style.display = "block";

}

//--></script>

Chat Conversation 748 days ago

Hey mike Adam Thorsen at 4:16 PM on Thursday August 10th, 2006
just answered your q, but if not, email me with more details: mtaylor769@gmail.com Mike T. at 4:16 PM on Thursday August 10th, 2006
oh ok Adam Thorsen at 4:16 PM on Thursday August 10th, 2006
the javascript q, btw Mike T. at 4:16 PM on Thursday August 10th, 2006
yeah I'm using block and none Adam Thorsen at 4:17 PM on Thursday August 10th, 2006
oh, I also answered the window q, but that's separate Mike T. at 4:17 PM on Thursday August 10th, 2006
block and none are not working? Mike T. at 4:17 PM on Thursday August 10th, 2006
onclick="$('contact_form').style.display = 'block';return false;" Adam Thorsen at 4:17 PM on Thursday August 10th, 2006
it works, everything displays except for text Adam Thorsen at 4:18 PM on Thursday August 10th, 2006
the input fields display Adam Thorsen at 4:18 PM on Thursday August 10th, 2006
why return false? Mike T. at 4:18 PM on Thursday August 10th, 2006
<div id='contact_form' style="display : none;"> Adam Thorsen at 4:18 PM on Thursday August 10th, 2006
Here is how the div starts out. <div id='contact_form' style="display : none;"> Adam Thorsen at 4:19 PM on Thursday August 10th, 2006
hmm, guruza has problems displaying that Adam Thorsen at 4:19 PM on Thursday August 10th, 2006
div id='contact_form' style="display : none;"> Adam Thorsen at 4:19 PM on Thursday August 10th, 2006
right, but why add the 'return false' to your onclick? Mike T. at 4:19 PM on Thursday August 10th, 2006
The return false doesn't need to be there. I just added it when I was messing around trying to figure this out. Adam Thorsen at 4:19 PM on Thursday August 10th, 2006
it's probably a moot point, anyway. Mike T. at 4:20 PM on Thursday August 10th, 2006
the next thing to check is the z-index of all the div's on the page Mike T. at 4:20 PM on Thursday August 10th, 2006
ok Adam Thorsen at 4:20 PM on Thursday August 10th, 2006
you may have two div's set to the same z-index, and IE is not able to reconcile Mike T. at 4:20 PM on Thursday August 10th, 2006
until the page scrolls, etc. Mike T. at 4:20 PM on Thursday August 10th, 2006
ok. I'm not manually setting the divs, so that seems unlikeley. Adam Thorsen at 4:21 PM on Thursday August 10th, 2006
I mean the z-index Adam Thorsen at 4:21 PM on Thursday August 10th, 2006
/s/div/z-index Adam Thorsen at 4:21 PM on Thursday August 10th, 2006
right, but check your CSS Mike T. at 4:21 PM on Thursday August 10th, 2006
k Adam Thorsen at 4:22 PM on Thursday August 10th, 2006
if you can't find anything obvious, set the z-index on your trouble div to a high number and see if that fixes it Mike T. at 4:22 PM on Thursday August 10th, 2006
you can do it in the javascript: Mike T. at 4:23 PM on Thursday August 10th, 2006
me.style.z-index = 10000; Mike T. at 4:23 PM on Thursday August 10th, 2006
yeah. ok, well I can't see any z-index settings that affect these divs, but it does sort of seem like that would be the problem. Adam Thorsen at 4:24 PM on Thursday August 10th, 2006
try forcing a high z-index, then slowly bring the number down until it happens again, then back up until you figure out the best z-index Mike T. at 4:26 PM on Thursday August 10th, 2006
also, explicitly set the 'color' style in the div's class Mike T. at 4:26 PM on Thursday August 10th, 2006
to what color? Adam Thorsen at 4:27 PM on Thursday August 10th, 2006
the color the text is supposed to be Mike T. at 4:27 PM on Thursday August 10th, 2006
do you know the 'html>body div#mydiv" syntax for non-ie browser overrides? Mike T. at 4:30 PM on Thursday August 10th, 2006
I don't think I do. Adam Thorsen at 4:33 PM on Thursday August 10th, 2006
lets say you have a CSS class "div#mydiv { width: 600px;}" Mike T. at 4:35 PM on Thursday August 10th, 2006
all browsers will read that. now say you look at it in FF and because of the border-inclusion issue, it looks wider than IE Mike T. at 4:35 PM on Thursday August 10th, 2006
below that CSS class you can do "html>body div#mydiv { width: 580px;}" that will only be read by non-ie browsers Mike T. at 4:36 PM on Thursday August 10th, 2006
the non-ie browsers will pick up all the IE stuff, then override any styles defined in the non-ie syntax Mike T. at 4:36 PM on Thursday August 10th, 2006
It's definitely a layering problem. Adam Thorsen at 4:37 PM on Thursday August 10th, 2006
cool, the z-index is helping? Mike T. at 4:38 PM on Thursday August 10th, 2006
I just put a really long line of text in the div with the problems, and the end of the text showed up to the right of the enclosing div Adam Thorsen at 4:38 PM on Thursday August 10th, 2006
so something is 'floating' over it Mike T. at 4:38 PM on Thursday August 10th, 2006
yes. I tried setting the z-index to 1000000, but that didn't fix it Adam Thorsen at 4:42 PM on Thursday August 10th, 2006
do you have WebDev Toolkit installed? Mike T. at 4:42 PM on Thursday August 10th, 2006
I don't. Is that some MSDN thing? Adam Thorsen at 4:43 PM on Thursday August 10th, 2006
"Developer Toolbar" in IE? Mike T. at 4:43 PM on Thursday August 10th, 2006
let me see if I can find the link. Mike T. at 4:43 PM on Thursday August 10th, 2006
has a DOM viewer you can click an element to find it Mike T. at 4:43 PM on Thursday August 10th, 2006
ah Adam Thorsen at 4:43 PM on Thursday August 10th, 2006
having trouble finding the url Mike T. at 4:51 PM on Thursday August 10th, 2006
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&;displaylang=en Mike T. at 4:54 PM on Thursday August 10th, 2006
here's one for FF: http://chrispederick.com/work/webdeveloper/ Mike T. at 4:54 PM on Thursday August 10th, 2006
great tools Mike T. at 4:55 PM on Thursday August 10th, 2006
hope this has pointed you in the right direction.... MT Mike T. at 4:57 PM on Thursday August 10th, 2006

Reply by Adam Thorsen 748 days ago

Mike, it did have to do with layering. There was a repeat-y style element for a containing div. It was supposed to create the left and right borders of a rounded div. in between the left and right pixels was white. By changing it to be transparent in the middle, I was able to solve the problem. Still shouldn't have been covering the other stuff though.