Databases
StackOverflow2013
Postsdbo
POWhy is this DIV rendering with no dimensions?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is this DIV rendering with no dimensions?
    text
    copied!<p><a href="http://clifgriffin.com/blockade2/" rel="nofollow noreferrer">http://clifgriffin.com/blockade2/</a></p> <p>Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.</p> <p>It's a simple concept, but I am apparently confused.</p> <p>The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.</p> <pre><code>&lt;div class="ram"&gt; &lt;div class="gray_middle"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Guest Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Concierge / Local Attractions&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;East Restaurant&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Aquarium Lounge&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Health Club&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Sandcampers Program&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Treasure Chest Gift Shop&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="gray_bottom"&gt; &lt;img src="images/top_menu_slidedown_gray_bottom.png" /&gt; &lt;/div&gt; </code></pre> <p></p> <p>There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.</p> <p>Any ideas?</p> <p>This is driving me absolutely batty. I have never had this many issues with something so simple.</p> <p>Thanks in advance, Clif</p> <p>P.S. I added some HTML comments to the destination so that you can better see what I mean. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload