Extra lines rendered at bottom of page

I am using the control and placing a footer at the bottom of the page.  When the page is rendered there are hidden lines being written.

ie:  
<div class="menu" style="position: absolute; visibility: hidden; cursor: default;">

<div class="menuItem" style="white-space: nowrap; width: 122px;">

<img src="FileVistaControl/images/menu/webbrowser.png" style="width: 16px; height: 16px; vertical-align: middle; margin-left: 3px; opacity: 1;"/>

<span style="vertical-align: middle; margin-left: 3px; margin-right: 11px;">Web Browser</span>

</div>

These lines push the end of the page further down and leave a gap after your footer.

How can I suppress these extra lines.  

Code is generated in C#.  Using example 2.

Actually there are no hidden lines are being written by the control, that code is dynamically created via DOM.

I could not reproduce the behaviour, are you sure it's related to the control and not some other code in you host page?

When I expand the page to 100% then it is easy to see the extra lines rendered. The page layout is altered without setting display to none. 

You have to set display style to none when div is hidden and display to inline 
when you want to display it. 

That will remove the overflow.

The reason behind using visibility:hidden instead of display:none was making some width and height calculations for the menus. It's strange that the div with position:absolute alters the page layout but a workaround will be found for it. Thanks for the feedback.