Please Note:
HierMenus is protected by copyright laws. Use of the HierMenus code requires a paid licensing agreement.
Click Here to Register

Site Navigation
Bulletins
About
Documentation
FAQ
Samples
Known Issues
Technology Jobs

internet.commerce

Partner With Us
Free Business Cards
Corporate Gifts
Hurricane Shutters
KVM over IP
Boat Donations
Imprinted Gifts
Cell Phones
Memory
Get Business Software
Best Price
Desktop Computers
Promotional Golf
Prepaid Phone Card
Compare Prices

          
internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

 
HierMenusCentral Enhance the Functionality of Your Web Site with DHTML HierMenus.
    

home / issues / issue #3

Issue:Menu creation adds whitespace to bottom of page
Browser:IE5.5/IE6
Platform:Windows
Description:When creating a menu in IE5.5 and 6, a small amount of whitespace may be "added" to the bottom of the HTML page. This whitespace appears even though HM specifically creates menus as hidden objects well off the left (and, in later versions, top) edge of the page.
Cause:Unknown. This appears to be a bug in the browser. In our original analysis, we theorized that the space was the result of IE5.5/6 always adding a small amount of white space to the bottom of the document whenever the last element of the page (the body's lastChild) was an absolutely positioned element. However, a reader has suggested a simpler and more likely cause: If there is a defined element on the page that follows the last visible element of the page, the margin-bottom of the last visible element of the page will be displayed in full. Or in other words, even though our menus are defined as absolutely positioned elements and are physically displayed elsewhere on the page, they are created as children of the body element after the last visible element of the page; and that last visible element is then displayed with its full margin allotment.

Or, to put it another way, IE5.5/6 does not display the bottom margin on the last child of the page (the last element actually created as a child of the body element of the page). Thus, the addition of the menus appears to "create" whitespace on the page, since the menus are added after the last element of the page, which in turn trigger the margin display on the last item.

To see what we're talking about, have a look at these three sample pages, none of which even use any JavaScript:

Absolutely Positioned Div On Bottom
Absolutely Positioned Div On Top
Absolutely Positioned Div On Bottom (with margin-bottom 0px)

Load the first page in IE5.5 or 6, then shrink the browser window until just before the vertical scrollbar would appear. Then load the second page into the same window without resizing it. On the second page, you'll notice your vertical scrollbar appears, even though the page contents should be identical (the only difference being a hidden, absolutely positioned object at (0,0) which, in the first page is defined at the beginning of the document and in the second page is defined at the end of the document). On the third page, the last h1 is specifically set to margin-bottom of 0px via the page's style sheet; notice that that page is displayed just like the first example, even though the absolutely positioned div is on the bottom of the page.

In HierMenus this space virtually always appears, since HM always creates menus at the end of the page (via appendChild) and page authors would rarely think to explicitly force the margins to be 0 on the last visible element of the page.

The above explanation leads us to two possible work arounds: change the HierMenus code to use insertBefore instead of appendChild; or setup your pages such that the last visible element of the page is always forced to have a margin-bottom of 0px.

Comments:As noted above, we see this problem partially because we use appendChild to add menus to the HTML document. When using insertBefore instead (this is the code workaround we mentioned above) the problem goes away (even though we are inserting/appending the exact same element). However, removing the margin display on the last visible item of the page using CSS directives (for example, <h1 style='margin-bottom:0px'> provides a much cleaner workaround since it does not require code adjustments and is therefore our generally recommended fix.

Other suggestions are requested. Please use this link to send mail if you have any insights and would like to share them:

Internet Explorer White Space

Posted:March 18, 2004


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture
IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Avaya Article: Using Intelligent Presence to Create Smarter Business Applications
Intel Go Parallel Article: Getting Started with TBB on Windows
Microsoft Article: 7.0, Microsoft's Lucky Version?
Avaya Article: How to Feed Data into the Avaya Event Processor
IBM Article: Developing a Software Policy for Your Organization
Microsoft Article: Managing Virtual Machines with Microsoft System Center
Intel Go Parallel Article: Intel Threading Tools and OpenMP
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML
IBM Article: Enterprise Search--Do You Know What's Out There?
HP Demo: StorageWorks EVA4400
Microsoft Article: The Progress and Promise of Deep Zoom
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
Created: 3/25/2004
Updated: 10/18/2004
URL: http://www.hiermenuscentral.com/issues/3.html