Why is this a DIV rendering without any measurements?

Question

http://clifgriffin.com/blockade2/

Ok, I have an unordered list that serves as a list of menu links. Does each one have a div that is configured for absolute positioning, below: 0. The idea is that you hover over the link in li and jQuery, animate the height to show the hidden div menu.

This is a simple concept, but I'm apparently confused.

The problem I am facing is that the div containing the slide menu does not take any measurements (according to the style information of the Firefox and Chrome conditions) when I put it in whether. If I put it somewhere else on the page, it will be EXCELLENT. You can see what I mean from the link. The gray menu at the top is how it should appear inside li, but it doesn’t.

<div class="ram"> <div class="gray_middle"> <ul> <li><a href="">Guest Services</a></li> <li><a href="">Concierge / Local Attractions</a></li> <li><a href="">East Restaurant</a></li> <li><a href="">Aquarium Lounge</a></li> <li><a href="">Health Club</a></li> <li><a href="">Sandcampers Program</a></li> <li><a href="">Treasure Chest Gift Shop</a></li> </ul> </div> <div class="gray_bottom"> <img src="images/top_menu_slidedown_gray_bottom.png" /> </div> 

There is a bit of javascript that needs to find the height of the div menu and set the identifier of the containing li to be equal to the height so that it can be referenced later. It does not matter ... The fact is that when the div is in li, its calculated height is 0. When it is outside, it is correct.

Any ideas?

It drives me crazy. I have never had such problems with something so simple.

Thanks in advance, Clif

PS I added some HTML comments to the destination so you can better understand what I mean.

Answer 1

Gentleman, Thanks for all your answers! I'm sorry it took me so long to get back to this post.

All this problem revealed several things that I don’t understand yet about how HTML elements are displayed.

I managed to solve this problem by switching the main menu blocks to div elements instead of li elements.

This makes no sense to me, since both of them are displayed in approximately the same way as I can judge by looking at the computed styles. But for some reason, when the container is a div, the contained divs are displayed with their respective sizes, which allows the rest of my code to work correctly. I didn't even have to change the attached CSS!

The main goal of this project was to finalize and make the client happy, I did not experiment outside this conclusion.

I welcome theories about why this would be.

Thanks again. Cliff

Answer 2

Absolutely positioned elements are “outside” the container and cannot really determine its size.

Relatively positioned elements affect the size of the container (and the flow of content), but then they move elsewhere.

In addition, for absolutely and relatively positioned elements, you should always indicate the explicit position of X, Y. This avoids some differences in the rendering of the cross browser.

Anyway, I made the following CSS changes and that submenu seemed to display OK on FF 3.6.4:

• For <li id="49"> add: height: 230px; overflow: hidden; height: 230px; overflow: hidden; .

• For div.subMenu add: top: 17px; and delete: bottom:0; .

• For gray_middle add: height:160px; top:0; height:160px; top:0; and remove: padding-top:20px; .

Answer 3

When you fully position an element, it will not expand the size of the container to the size necessary to accommodate it.

Example

HTML

<div id="outer"><div id="inner">In</div>Out</div>

CSS

 #outer { background-color: red; } #inner { width: 100px; position: absolute; top: 100px; background-color: blue; } 

Look at it here - http://www.jsfiddle.net/r7MgY/86/

Answer 4

Hi, clifgriffin If you had a quick look at the HTML code, the shame would not give us CSS, but ... there are a few things that I’m not sure about - the headline says the WordPress 2.9.2 generator, but the html looks like "familiar "WordPress. If this is WordPress generated, check out the wp_list_pages and wp_list_categories tags that you use. I also highly recommend upgrading to WP3.0, as it has MUCH MORE functionality (custome post / pages types, etc.), plus a "built-in" menu function.

I think you can use too much CSS. Most of what you want to achieve can be done much less.

Guest Services Concierge / Local Attractions Eastern Restaurant Aquarium Lounge Health Club Sandbox Program Treasure Chest Shop

Then you can specify the ul identifier (the identifier identifier must be unique), this will help with any Java that you want to use, also add to your class ram with images of the background image images / top _menu_slidedown_gray_bottom.png. When you use the ram class again without an image. for example <div class="ram backgroundimageclass"> Then you save a lot of "code" and load time, etc.

If you give the ram class the attribute "position: relative"; you can then give UL id the attribute "position: absolute"; li may be in style e.g.

 ul#ID li {line-height 30px; etc ...) ul#ID li:hover {line-height 30px; etc ...) ul#ID li:hover a {line-height 30px; etc ...) 

etc.

Oh forgot ... also why not add this code to the head

 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 

And this is right after the tag

  <!-- DO NOT REMOVE --> <!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ --> <!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. --> <div id="prompt"><!-- if IE without GCF, prompt goes here --></div> <script type="text/javascript"> CFInstall.check({ mode: "inline", // the default node: "prompt" }); </script> <!-- END THE LAYOUT FOR GOOGLE CHROME FRAME --> 

This allows you to "detect" the browser and gives them the opportunity (if not to install) to use Google Chrome Frame, you can: Start using open web technologies - for example, the HTML5 canvas tag - right away, even technologies that are not yet supported in Internet Explorer 6, 7 or 8. Take advantage of JavaScript performance enhancements to make your applications faster and more responsive. Enabling Google Chrome Frame is easy. For most web pages, all you have to do is add one tag to your pages as described above and determine if your Google Chrome Frame users are installed. If Google Chrome Frame is not installed, you can direct your users to the installation page. If Google Chrome Frame is installed, it detects the added tag and works automatically.

Answer 5

Cliff Just "completely" understood what you are trying to do here - sorry that the "breeze" is so long. Well, you can do it with much more ease than you are trying to do at the moment. All he needs is some jQuery and some basic CSS. There is no need to establish absolute positions, etc.

In your CSS, use {display: none; } for class = "subMenu", since you know that this will "hide" it, I might also be tempted to do the same thing in your jQuery functions "doubly sure." Then in jQuery create a mouseover effect (the mouse is "better" than hover) for the top_menu_links class (I think you could output the aco and white_middle classes or at least combine them in css for the corresponding ul) show .next (' ul); you can move it, etc. Then the mouse on ul. Thus, ul remains visible until the mouse event. I did this quite successfully in the WP theme to display a “dynamic” list of categories on the mouse above the event on the div, making it look like a button. Sorry, you don’t have the code that will be shown later, but it will look later and “pass it on”

In addition, you can set the ul background image as suitable. <img src="images/top_menu_slidedown_white_bottom.png" /> (or gray), just setting it to the background position: bottom repeat: none; and the bottom is the image height. No need for alt tags, etc.

Answer 6

Sorry, “it came out a bit”, anyway, here is the code I used to “recreate” your bottom menu. This is not how you think it closes after turning off the “menu item” or “submenu”. To make it work in the top menu, just change the position from bottom to top:

 $(document).ready(function() { $('.indexMenu').mouseover(function(){ $(this).children().show(); $(this).children().mouseover(function(){ $(this).children().show(); }); }); $('.indexMenu').mouseout(function(){ $('.sub_menu').hide(); }); }); 

Here is the "html"

 <div class="indexMenu"> Menu 1 <div class="sub_menu"> Item <br /> Item <br /> Item </div> </div> <div class="indexMenu"> Menu 2 <div class="sub_menu"> Item <br /> Item <br /> Item <br /> Item </div> </div> <div class="indexMenu"> <div class="sub_menu"> Menu 3 <br /> Item <br /> Item <br /> Item <br /> Item </div> </div> <div class="indexMenu"> Menu 4 <div class="sub_menu"> Item </div> </div> 

Obviously, you can "use" any thing in the ul, ol, etc. submenu.

And "plain CSS

 .indexMenu { position: relative; bottom: 3px; width: 240px; height: 32px; float: left; line-height: 30px; border-top: 2px solid #FFFFFF; text-align:center; text-transform:uppercase; text-shadow: 1px 1px 1px rgba(255, 255, 255, 1); font-weight: 900; color:#333333; 

}

 .sub_menu { display: none; position: absolute; bottom: 33px; width: 240px; background-color:#DBF3FD; opacity:0.8; filter: alpha(opacity=80); } 

OK I added a filter in the submenu to have a certain transparency