This Question have 2 answers right now.

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



Wrapping lists into columns


How to set up a CSS switcher

Autosizing textarea using Prototype

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

Setting the height of a DIV dynamically

Making an iframe take vertical space

Can I stop .NET eating IDs?

Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace

Google Finance - Get Quotes search box - Column Alignment

CSS overflow table row positioning

Will .NET MVC give me the HTML/CSS/JS separation I need?


What is the best online javascript/css/html/xhtml/dom reference? [closed]

Is there a way to make text unselectable on an HTML page? [duplicate]

How to set up the browser scrollbar to scroll part of a page?

Google Maps, Z Index and Drop Down Javascript menus

How to center text over an image in a table using javascript, css, and/or html?

How to implement a web page that scales when the browser window is resized?

What are some excellent examples of user sign-up forms on the web? [closed]

Make a div fade away nicely after a given amount of time

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