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

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

<p>I can get the <code>div</code> 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.</p>

<p>I've tried everything I can think of, including:</p>

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

<p>Any ideas about what could cause this?</p>

[{'answer_id': 10368, 'author': 'TheSmurf', 'author_id': 1975282, 'author_profile': 'https://Stackoverflow.com/users/1975282', 'pm_score': 1, 'selected': False, 'text': "<p>Check the error console (Tools Menu > Error Console in Firefox 3) to make sure that there isn't another error happening that you're not seeing, which is stopping your script from working.</p>\n"}, {'answer_id': 10378, 'author': 'Serhat Ozgel', 'author_id': 31505, 'author_profile': 'https://Stackoverflow.com/users/31505', 'pm_score': 3, 'selected': False, 'text': '<p>Can you provide some markup that reproduce the error?</p>\n\n<p>Your situation must have something to do with your code since I can get this to work on IE, FF3 and Opera 9.5:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>function show() {\r\n  var d = document.getElementById(\'testdiv\');\r\n  d.style.display = \'block\';\r\n}</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#testdiv {\r\n  position: absolute;\r\n  height: 20px;\r\n  width: 20px; \r\n  display: none;\r\n  background-color: red;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="testdiv"&gt;&lt;/div&gt;\r\n&lt;a href="javascript:show();"&gt;Click me&lt;/a&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 10485, 'author': 'Lance Fisher', 'author_id': 571, 'author_profile': 'https://Stackoverflow.com/users/571', 'pm_score': 1, 'selected': False, 'text': "<p>Try setting the height and width of the div, and make sure it is on top by setting its z-index higher than everything else.  If the absolutely positioned div is inside an element that is relatively positioned, it's top and left location is based off the top and left of the relatively positioned element.  Try putting your div just under the body element.</p>\n"}, {'answer_id': 11197, 'author': 'palmsey', 'author_id': 521, 'author_profile': 'https://Stackoverflow.com/users/521', 'pm_score': 4, 'selected': True, 'text': "<p>Since setting the properties with javascript never seemed to work, but setting using Firebug's inspect did, I started to suspect that the javascript ID selector was broken - maybe there were multiple items in the DOM with the same ID?  The source didn't show that there were, but looping through all divs using javascript I found that that was the case. Here's the function I ended up using to show the popup:</p>\n\n<pre><code>function openPopup(popupID)\n{\n  var divs = getObjectsByTagAndClass('div','popupDiv');\n  if (divs != undefined &amp;&amp; divs != null)\n  {\n    for (var i = 0; i &lt; divs.length; i++)\n    {\n      if (divs[i].id == popupID)\n        divs[i].style.display = 'block';        \n    }\n  }\n}\n</code></pre>\n\n<p>(utility function getObjectsByTagAndClass not listed)</p>\n\n<p>Ideally I'll find out why the same item is being inserted multiple times, but I don't have control over the rendering platform, just its inputs.</p>\n\n<p>So when debugging issues like this, <strong>remember to check for duplicate IDs in the DOM, which can break getElementById</strong>.</p>\n\n<p>To everyone who answered, thanks for your help!</p>\n"}, {'answer_id': 927045, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': '<p>Found the answer :\nI need to use the following to make it work on both browsers :</p>\n\n<pre class="lang-js prettyprint-override"><code>document.getElementById(\'editRow\').style.display = \'\';\n</code></pre>\n'}, {'answer_id': 1776793, 'author': 'Paul', 'author_id': 216232, 'author_profile': 'https://Stackoverflow.com/users/216232', 'pm_score': 0, 'selected': False, 'text': "<p>There is an annoying display error on Firefox 3.5 but not on IE7 or Firefox 2.0.9</p>\n\n<p>I have 3 DIV's position absolute - the first with plain text; the second with a CSS menu (sucklefish type with UL and LI) and the third ditto.  The third will not display at all even though the coding has been checked and found to be perfect with W3C's HTML validator.</p>\n\n<p>As a temporary measure, I have merged the second and third DIV's contents.</p>\n\n<p>Things must be bad at Mozilla when IE7 and FF2 display OK but not FF 3.5</p>\n"}, {'answer_id': 5705775, 'author': 'Neal Connolly', 'author_id': 713750, 'author_profile': 'https://Stackoverflow.com/users/713750', 'pm_score': 2, 'selected': False, 'text': '<p>Actually I was experiencing the same problem you\'re describing here. What actually fixed my issue was changing the document properties. </p>\n\n<p><strong>Old DOCTYPE/html spec</strong></p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;\n&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;\n</code></pre>\n\n<p><strong>Replaced with</strong></p>\n\n<pre><code>&lt;html&gt;\n</code></pre>\n'}, {'answer_id': 6952255, 'author': 'fadzzz', 'author_id': 879981, 'author_profile': 'https://Stackoverflow.com/users/879981', 'pm_score': 1, 'selected': False, 'text': "<p>You must write a <code>window.onload</code> method:</p>\n\n<pre><code>window.onload = document.getElementById('testdiv').style.display='inline';\n</code></pre>\n\n<p>Or you can also make a variable:</p>\n\n<pre><code>var d = document.getElementById('testdiv');\nwindow.onload = d.style.display = 'inline';\n</code></pre>\n"}, {'answer_id': 17100771, 'author': 'Ron Lentjes', 'author_id': 2484613, 'author_profile': 'https://Stackoverflow.com/users/2484613', 'pm_score': 0, 'selected': False, 'text': '<p>I\'ll give you a BIG hint:</p>\n\n<pre><code>&lt;div style="..." class="..."&gt; ... &lt;/div&gt;\n</code></pre>\n\n<p>If you have something in style, then document.style will work!\nIf you have something in class, it will not show up in document.style and class="..." will OVERRIDE it!</p>\n\n<p>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.</p>\n'}]
['https://Stackoverflow.com/questions/10366', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/521/']