style.display not working in Firefox, Opera, Safari - IE7 OK

By : palmsey
Source: Stackoverflow.com
Question!

I have an absolutely positioned div that I want to show when the user clicks a link. The onclick of the link calls a js function that sets the display of the div to block (also tried: "", inline, table-cell, inline-table, etc). This works great in IE7, not at all in every other browser I've tried (FF2, FF3, Opera 9.5, Safari).

I've tried adding alerts before and after the call, and they show that the display has changed from "none" to "block" but the div does not display.

I can get the div to display in FF3 if I change the display value using Firebug's HTML inspector (but not by running javascript through Firebug's console) - so I know it's not just showing up off screen, etc.

I've tried everything I can think of, including:

  • Using a different doctype (XHTML 1, HTML 4, etc)
  • Using visibility visible/hidden instead of display block/none
  • Using inline javascript instead of a function call
  • Testing from different machines

Any ideas about what could cause this?

By : palmsey


Answers

I'll give you a BIG hint:

<div style="..." class="..."> ... </div>

If you have something in style, then document.style will work! If you have something in class, it will not show up in document.style and class="..." will OVERRIDE it!

Think about this and this will clear up SO MANY ISSUES. Just this one little understanding will RID you of this MIND VIRUS. Have a good day. Cheers, Ron Lentjes, LC CLS.



You must write a window.onload method:

window.onload = document.getElementById('testdiv').style.display='inline';

Or you can also make a variable:

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
By : fadzzz


This video can help you solving your question :)
By: admin