473,566 Members | 2,812 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,

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 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 2 days now and would very much appreciate if someone could suggest a solution.

Thanks in advance.

P.S

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 #1
5 5465
acoder
16,027 Recognized Expert Moderator MVP
Is the offsetTop value correct?
Sep 10 '08 #2
montybytes
5 New Member
Is the offsetTop value correct?
Yes, the value is correct for the offsetTop.
Sep 10 '08 #3
Romulo NF
54 New Member
check this link, i think it will solve your problem:

http://www.quirksmode. org/js/findpos.html

Regards,
Romulo
Sep 10 '08 #4
montybytes
5 New Member
check this link, i think it will solve your problem:

http://www.quirksmode. org/js/findpos.html

Regards,
Romulo
Thanks Romulo - I have actually read this blog and tried using the findPos function but ended up with the same result. I am so frustrated with this now ...... hoping ....... someone who be able to .............
Sep 11 '08 #5
acoder
16,027 Recognized Expert Moderator MVP
Not sure about the exact solution, but this may help:
Expand|Select|Wrap|Line Numbers
  1. function leftPosition(target) {
  2. var left = 0;
  3. if(target.offsetParent) {
  4.     while(1) {
  5.         left += target.offsetLeft;
  6.         alert(target.nodeName+":"+target.className+":"+left);
  7.         if(!target.offsetParent) {
  8.             break;
  9.         }
  10.         target = target.offsetParent;
  11.     }
  12. } else if(target.x) {
  13.     left += target.x;
  14. }
  15. alert("end:"+left);
  16. return left;
  17. }
The alerts may help you debug. It seems to be the col1 div which is causing the problem.
Sep 11 '08 #6

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

Similar topics
1
10106
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
1852
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...
Javascript
1
24064
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...
Javascript
1
1848
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...
Javascript
21
3946
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...
Javascript
10
7714
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?...
Javascript
2
4101
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...
Javascript
2
2246
Element offsetLeft producing a wrong value in IE6
by: montybytes | last post by:
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...
HTML / CSS
0
7666
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
General
0
8108
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...
Online Marketing
1
7644
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...
Windows Server
0
7951
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...
General
0
6260
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
Career Advice
1
5484
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...
Microsoft Access / VBA
0
3643
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
Networking - Hardware / Configuration
0
3626
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
1
1201
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

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