offsetTop, offsetLeft IE7 Incorrect

[basicedition]

Hi I am building a dynamic menu my problem lies when I try to detect the position of an element on IE7

here is the css code

.dmenu_menuheader
{
      display: inline;
      margin-right: 10px;
      font-size: 12px;
}

.dmenu
{
      display: block;
      position: absolute;
      visibility: hidden; 
      background: white;
      border: 1px solid;

}

.dmenu a
{
      text-decoration: none;
      display: block;
      border-top: 1px solid;
      padding: 2px;
}

here is the html

 <!-- Navigation Bar -->
 <div class="navbar">
   
     <div id="navbar_left">
       <div class="dmenu_menuheader" id="left_header1" onClick="getD('left_header1');">Home</div>
       <div class="dmenu_menuheader" id="left_header2">Groups</div>
       <div class="dmenu_menuheader" id="left_header3">Profile</div>
       <div class="dmenu_menuheader" id="left_header4">Messages</div>
     </div>
     
     <div id="navbar_right">
       <div class="dmenu_menuheader" id="right_header1">Settings</div>
       <div class="dmenu_menuheader" id="right_header2">Logout</div>
     </div>
        
 </div>
 <!-- Navigation Bar -->
 

 <!-- Dynamic Menus -->
 <div class="dmenu" id="right_menu1">
 </div>
 
 <div class="dmenu" id="left_menu1">
   <a href="#">Create Group</a>
   <a href="#">Delete Group</a>
 </div>

 <div class="dmenu" id="left_menu2">
 </div>

 <div class="dmenu" id="left_menu3">
 </div>
 <!-- Dynamic Menus -->

here is the CSS for navbar, navbar_left and navbar_right

.navbar
{
   height: 26px;
   border-bottom: 1px solid #113355;
   border-left: 1px solid #113355;
   border-right: 1px solid #113355;
}

#navbar_right
{
   float: right;
   margin-top: 4px;
   margin-right: 10px;
}

#navbar_left
{
   float: left;
   margin-top: 4px;
   margin-left: 10px;
   display: block;
}

and finally here is the javascript

function getD(el)
{
   var		obj;
   
   obj = document.getElementById(el);
   
   alert('left: ' + obj.offsetLeft);
   alert('top: ' + obj.offsetTop);
}

ok so testing this code on the webkit and Gecko engine both return the correct values but when I try it on IE7 it gives 0 for top and 0 for left.

Anybody has any ideas why IE7 behaves this way ??

I Thank you in advance.

[voidvector]

IE counts floated elements as containing element, while other browsers do not. Your DIV with the alert() is contained by another DIV that has float left.

You can traverse thru the offsetParent to see which element is considered containing element.

[basicedition]

haaa I see thank you for your reply that worked like a charmed I just looped through and added the values and it worked. unbelievable your the best dude