473,698 Members | 2,186 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Element offsetLeft producing a wrong value in IE6

5 New Member
Hi there,

I have a JavaScript function which retrieves the left-position of an Element. This JavaScript functions works in FF and IE7 but does not work in IE6, In IE6 it retrieves the wrong offsetLeft value. Having investigating the problem I noticed it had something to do with the margin-left and position attributes defined in the CSS. It seems to be affecting how the offsetLeft is translated in IE6.

My question is how can I get round this problem without doing any major changes.

I have been stuck with this for the whole day and would appreciate if someone could suggest a solution.

Thanks in advance.
Sep 8 '08 #1
2 2256
drhowarddrfine
7,435 Recognized Expert Expert
Which doctype are you using? Without a valid doctype, IE screws up the box model and goes into quirks. But if the values are already set in CSS, I don't know what would cause it. So this is a javascript question.

Without a link or the code, anything else is a guess.
Sep 8 '08 #2
montybytes
5 New Member
Which doctype are you using? Without a valid doctype, IE screws up the box model and goes into quirks. But if the values are already set in CSS, I don't know what would cause it. So this is a javascript question.

Without a link or the code, anything else is a guess.
Thanks drhowarddrfine:

Here are the related code: I have pasted 3 files, the HTML, CSS and JavaScript code.

///////////////////////////////////////HTML File////////////////////////////////////////////////////////

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<script language="javas cript" src="Valid.js"> </script>



<link href="layout.cs s" rel="stylesheet " type="text/css">
<link href="messages. css" rel="stylesheet " type="text/css">


<title>Form</title>

</head>
<body style="margin-top:50px;margin-left:50px">
<form id="FORM" name="FORM">
<div id="header">
</div>


<div class="colmask leftmenu">
<div class="colright ">
<div class="col1wrap ">
<div class="col1" id="main-content">
<!-- Column 2 start -->

<span id="headerName" ></span>

<table width="100%" border="1">
<tr>
<td width="30%">Fir stname </td>
<td width="70%"><la bel>
<input type="text" name="FIRST_NAM E" id="FIRST_NAME " class="mandator y" title="First name">
</label></td>
</tr>
<tr>
<td>Lastname</td>
<td><input type="text" name="LAST_NAME " id="LAST_NAME" class="mandator y" title="Last name"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="EMAIL_ADD " id="EMAIL_ADD" class="mandator y" title="Email Address"></td>
</tr>
<tr>
<td>Contact No.</td>
<td><input type="text" name="CONTACT_N O" id="CONTACT_NO " class="mandator y" title="Contact No."></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label>
<input type="button" name="button" id="button" value="Validate " onClick="return validate();">
</label></td>
</tr>
</table>


</div>
</div>
<div class="col2">
<!-- Column 1 start -->

<div id="main-menu">
<p>Navigation Menu</p>
<ul>
<li>Main Page </li>
<li>Page 1 </li>
<li>Page 2 </li>
</ul>
</div>

<!-- Column 1 end -->
</div>
</div>
</div>
<div id="footer">
Page footer
</div>





</form>
</body>
</html>
[/HTML]



///////////////////////////////////////CSS File////////////////////////////////////////////////////////


Expand|Select|Wrap|Line Numbers
  1.  body {
  2.         margin:0;
  3.         padding:0;
  4.         border:0;            /* This removes the border around the viewport in old versions of IE */
  5.         width:100%;
  6.  
  7.         min-width:600px;    /* Minimum width of layout - remove line if not required */
  8.                             /* The min-width property does not work in old versions of Internet Explorer */
  9.  
  10.     }
  11.  
  12.     /**
  13.     p {
  14.         margin:.4em 0 .8em 0;
  15.         padding:0;
  16.     } */
  17.  
  18.     /* Header styles */
  19.     #header {
  20.         clear:both;
  21.         float:left;
  22.         width:99%;
  23.  
  24.     }
  25.     /**
  26.     #header p,
  27.     #header h1,
  28.     #header h2 {
  29.         padding:.4em 15px 0 15px;
  30.         margin:0;
  31.     }
  32.     #header ul {
  33.         clear:left;
  34.         float:left;
  35.         width:100%;
  36.         list-style:none;
  37.         margin:10px 0 0 0;
  38.         padding:0;
  39.     }
  40.     #header ul li {
  41.         display:inline;
  42.         list-style:none;
  43.         margin:0;
  44.         padding:0;
  45.     }
  46.     #header ul li a {
  47.         display:block;
  48.         float:left;
  49.         margin:0 0 0 1px;
  50.         padding:3px 10px;
  51.         text-align:center;
  52.         background:#eee;
  53.         color:#000;
  54.         text-decoration:none;
  55.         position:relative;
  56.         left:15px;
  57.         line-height:1.3em;
  58.     }
  59.     #header ul li a:hover {
  60.         background:#369;
  61.         color:#fff;
  62.     }
  63.     #header ul li a.active,
  64.     #header ul li a.active:hover {
  65.         color:#fff;
  66.         background:#000;
  67.         font-weight:bold;
  68.     }
  69.     #header ul li a span {
  70.         display:block;
  71.     } */
  72.     /* 'widths' sub menu */
  73.     #layoutdims {
  74.         clear:both;
  75.         /*background:#eee;*/
  76.  
  77.         margin:0;
  78.         padding:0px 17px !important;
  79.         text-align:right;
  80.     }
  81.     /* column container */
  82.     .colmask {
  83.         position:relative;        /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  84.         clear:both;
  85.         float:left;
  86.         width:100%;            /* width of whole page */
  87.         overflow:hidden;    /* This chops off any overhanging divs */
  88.     }
  89.     /* 2 column left menu settings */
  90.     .leftmenu {
  91.        /* background:#FFD8B7;*/
  92.     }
  93.     .leftmenu .colright {
  94.         float:left;
  95.         width:200%;
  96.         position:relative;
  97.         left:200px;
  98.         background:#fff;
  99.     }
  100.     .leftmenu .col1wrap {
  101.         float:right;
  102.         width:50%;
  103.         position:relative;
  104.         right:200px;
  105.         padding-bottom:1em;
  106.     }
  107.     .leftmenu .col1 {
  108.         margin:0 15px 0 170px;
  109.         position:relative;
  110.         right:100%;
  111.         overflow:hidden;
  112.     }
  113.     .leftmenu .col2 {
  114.         float:left;
  115.         width:180px;
  116.         position:relative;
  117.         right:194px;
  118.     }
  119.     /* Footer styles */
  120.     #footer {
  121.         clear:both;
  122.         float:left;
  123.         width:100%;
  124.         font-size: 0.7em;
  125.         padding: 1em 0.5em 0.5em 0.5em;
  126.         text-align: center;
  127.     }
  128.     #footer p {
  129.     margin: 0.5em;
  130.    }
  131.  
  132.     #footer #legal {
  133.     margin: 2em 0 0 0;
  134.     padding: 0;
  135.     }
  136.  
  137.     #footer #legal li {
  138.     display: inline;
  139.     }
  140.     #footer #copyrights {
  141.         margin: 0.5em;
  142.     }
  143.  
  144.   #footer ul {
  145.     display: inline;
  146.     margin: 0 0 0 0.4em;
  147.     padding: 0 0 0 0.4em;
  148.  
  149.  
  150. }
  151.  
  152. * {margin:0; padding:0}
  153. #msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px}
  154. #msgcontent {display:block; background:#f3e6e6; border:2px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}
  155.  
  156.     /* --> */
  157.  
  158.     <!--[if lt IE 7]>
  159.     <style media="screen" type="text/css">
  160.     .col1 {
  161.         width:100%;
  162.     }
  163.     </style>
  164.     <![endif]-->
  165.  
///////////////////////////////////////JavaScript File////////////////////////////////////////////////////////

Expand|Select|Wrap|Line Numbers
  1. function validate()
  2. {
  3.     try 
  4.     {
  5.         var form = document.forms["FORM"];
  6.         var len = form.elements.length;
  7.         for (var i = 0; i < len; i++) 
  8.         {
  9.             var fld = form.elements[i];
  10.  
  11.  
  12.             if(fld.className == "mandatory" && fld.value == "")
  13.             {
  14.                  var sErrMsg = fld.title + " is required";
  15.                  inlineMsg(fld.name,sErrMsg);
  16.                  return false;
  17.             }
  18.  
  19.  
  20.         }
  21.         return true;
  22.     } 
  23.     catch (E) 
  24.     {
  25.         alert(E);
  26.     }
  27. }
  28.  
  29.  
  30.  
  31.  
  32. var MSGTIMER = 20;
  33. var MSGSPEED = 5;
  34. var MSGOFFSET = 3;
  35. var MSGHIDE = 3;
  36.  
  37. // build out the divs, set attributes and call the fade function //
  38. function inlineMsg(target,string,autohide) {
  39.   var msg;
  40.   var msgcontent;
  41.   if(!document.getElementById('msg')) {
  42.     msg = document.createElement('div');
  43.     msg.id = 'msg';
  44.     msgcontent = document.createElement('div');
  45.     msgcontent.id = 'msgcontent';
  46.     document.body.appendChild(msg);
  47.     msg.appendChild(msgcontent);
  48.     msg.style.filter = 'alpha(opacity=0)';
  49.     msg.style.opacity = 0;
  50.     msg.alpha = 0;
  51.   } else {
  52.     msg = document.getElementById('msg');
  53.     msgcontent = document.getElementById('msgcontent');
  54.   }
  55.   msgcontent.innerHTML = string;
  56.   msg.style.display = 'block';
  57.   var msgheight = msg.offsetHeight;
  58.   var targetdiv = document.getElementById(target);
  59.   targetdiv.focus();
  60.   var targetheight = targetdiv.offsetHeight;
  61.   var targetwidth = targetdiv.offsetWidth;
  62.   var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
  63.   var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
  64.   msg.style.top = topposition + 'px';
  65.   msg.style.left = leftposition + 'px';
  66.   clearInterval(msg.timer);
  67.   msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
  68.   if(!autohide) {
  69.     autohide = MSGHIDE;  
  70.   }
  71.   window.setTimeout("hideMsg()", (autohide * 1000));
  72. }
  73.  
  74. // hide the form alert //
  75. function hideMsg(msg) {
  76.   var msg = document.getElementById('msg');
  77.   if(!msg.timer) {
  78.     msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
  79.   }
  80. }
  81.  
  82. // face the message box //
  83. function fadeMsg(flag) {
  84.   if(flag == null) {
  85.     flag = 1;
  86.   }
  87.   var msg = document.getElementById('msg');
  88.   var value;
  89.   if(flag == 1) {
  90.     value = msg.alpha + MSGSPEED;
  91.   } else {
  92.     value = msg.alpha - MSGSPEED;
  93.   }
  94.   msg.alpha = value;
  95.   msg.style.opacity = (value / 100);
  96.   msg.style.filter = 'alpha(opacity=' + value + ')';
  97.   if(value >= 99) {
  98.     clearInterval(msg.timer);
  99.     msg.timer = null;
  100.   } else if(value <= 1) {
  101.     msg.style.display = "none";
  102.     clearInterval(msg.timer);
  103.   }
  104. }
  105.  
  106. // calculate the position of the element in relation to the left of the browser //
  107. function leftPosition(target) {
  108.   var left = 0;
  109.   if(target.offsetParent) {
  110.     while(1) {
  111.       left += target.offsetLeft;
  112.       if(!target.offsetParent) {
  113.         break;
  114.       }
  115.       target = target.offsetParent;
  116.     }
  117.   } else if(target.x) {
  118.     left += target.x;
  119.   }
  120.   return left;
  121. }
  122.  
  123. // calculate the position of the element in relation to the top of the browser window //
  124. function topPosition(target) {
  125.   var top = 0;
  126.   if(target.offsetParent) {
  127.     while(1) {
  128.       top += target.offsetTop;
  129.       if(!target.offsetParent) {
  130.         break;
  131.       }
  132.       target = target.offsetParent;
  133.     }
  134.   } else if(target.y) {
  135.     top += target.y;
  136.   }
  137.   return top;
  138. }
  139.  
  140. // preload the arrow //
  141. if(document.images) {
  142.   arrow = new Image(7,80); 
  143.   arrow.src = "images/msg_arrow.gif"; 
  144. }
Sep 9 '08 #3

Sign in to post your reply or Sign up for a free account.

Similar topics
1
10152
Distance between an element and the top of the page
by: Gilles Lenfant | last post by:
Hi, I got an element ( say <div id="foo">... ) at its natural position in a page. I need to get the distance (in pixels) between the top of that element and the top of the page/frame. Of course, I'd prefer this to work with IE and Mozilla family. Many thanks in advance.
Javascript
5
1855
Determine dynamically how far from the left of the Client area an element is?
by: George Hester | last post by:
Say I have this in a web page: <center><a href="http://www.microsoft.com">www.microsoft.com</a></center> I can use CSS, the DOM and\or JavaScript to determine the width style.innerHTML.length of the www.micosoft.com. But how can I tell in pixels how far it is from the left side of the client area using JavaScript? If the browser is resized and the text wraps the distance will change. So I need to determine it dynamically. Thanks. --...
Javascript
1
24079
CSS and javascript, find absolute position of element
by: Knut | last post by:
Hello everybody. This is my first attempt at Javascript, something that is long overdue. But please bear that in mind, and have mercy (= My question is simple: I'm doing a dropdown menu system to work on the <div>'s produced by our CMS, and every menubutton div has a onMouseOver="openSubmenu(this, 'popup1234')", where popup 1234 is the id of the div with the proper
Javascript
1
1857
element position in nested tables??!!
by: travis_brooks | last post by:
greetings I had a javascript that was reliably telling me the position of an image on a page, and now its not. I was using the script to draw a bounding box that followed the mouse around over the image, and when you clicked the mouse the x-y position of the image pixel the mouse was over was posted back in the form. I just changed the layout of the page so that the image is now in a table that is nested in another table, and the old...
Javascript
21
3972
Getting (and setting) a style value from a element that use a class
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael
Javascript
8
1482
How can one find the absolute x-value (from body 0) of the lower edge of a given element
by: Dag Sunde | last post by:
Imagine a mess of div-elements nested inside each other some relative, some absolute. Some of them grows when their children grows... And at some point, I want the x-coordinate of the bottom edge of the element that is lowest down on the page. Of course I need to support the most popular UAs on each major platform (Not NS4.x)
Javascript
10
7731
offsetLeft bug with borders in IE when width: is specified?
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width: property specified. Without a specified width: it gets it correct. Does anyone know 1) If this is a known bug, and if it affects any other browsers? I tested a few and found no problems.
Javascript
2
4109
position of an element relative to the page
by: steven acer | last post by:
i'm illiterate when it comes to javascript and browser issues, i'm trying to code a small help module for my java app.i've went far enough coding all the server side but i'm stuck with javascript now. i'm trying to implement a tool tip behavior on a couple of input element. I just can't get to figure out the coordinates of the element in question with respect to the page especially when it is inside a scrollable container such as a...
Javascript
5
5472
Element offsetLeft producing a wrong value in IE6
by: montybytes | last post by:
Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves the left-position of an Element. This JavaScript functions works in FF and IE7 but does not work in IE6, In IE6 it retrieves the wrong offsetLeft value. Having investigated the problem I noticed it had something to do with the margin-left and position...
Javascript
0
8604
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
Windows Server
0
9028
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
1
8895
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
Windows Server
0
8861
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
General
1
6518
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
5860
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
C# / C Sharp
1
3046
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
C# / C Sharp
2
2330
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP
3
2001
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us