www.webdeveloper.com
Results 1 to 3 of 3

Thread: offsetTop, offsetLeft IE7 Incorrect

  1. #1
    Join Date
    Jan 2009
    Posts
    2

    Unhappy offsetTop, offsetLeft IE7 Incorrect

    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

    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

    Code:
     <!-- 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

    Code:
    .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

    Code:
    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.

  2. #2
    Join Date
    Oct 2008
    Posts
    349
    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.

  3. #3
    Join Date
    Jan 2009
    Posts
    2

    Thumbs up reply

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles