By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,272 Members | 1,420 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,272 IT Pros & Developers. It's quick & easy.

Element offsetLeft producing a wrong value in IE6

P: 5
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="javascript" src="Valid.js"></script>



<link href="layout.css" 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%">Firstname </td>
<td width="70%"><label>
<input type="text" name="FIRST_NAME" id="FIRST_NAME" class="mandatory" title="First name">
</label></td>
</tr>
<tr>
<td>Lastname</td>
<td><input type="text" name="LAST_NAME" id="LAST_NAME" class="mandatory" title="Last name"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="EMAIL_ADD" id="EMAIL_ADD" class="mandatory" title="Email Address"></td>
</tr>
<tr>
<td>Contact No.</td>
<td><input type="text" name="CONTACT_NO" id="CONTACT_NO" class="mandatory" 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. catch (E) 
  23. {
  24. alert(E);
  25. }
  26. }
  27.  
  28.  
  29.  
  30.  
  31. var MSGTIMER = 20;
  32. var MSGSPEED = 5;
  33. var MSGOFFSET = 3;
  34. var MSGHIDE = 3;
  35.  
  36. // build out the divs, set attributes and call the fade function //
  37. function inlineMsg(target,string,autohide) {
  38. var msg;
  39. var msgcontent;
  40. if(!document.getElementById('msg')) {
  41. msg = document.createElement('div');
  42. msg.id = 'msg';
  43. msgcontent = document.createElement('div');
  44. msgcontent.id = 'msgcontent';
  45. document.body.appendChild(msg);
  46. msg.appendChild(msgcontent);
  47. msg.style.filter = 'alpha(opacity=0)';
  48. msg.style.opacity = 0;
  49. msg.alpha = 0;
  50. } else {
  51. msg = document.getElementById('msg');
  52. msgcontent = document.getElementById('msgcontent');
  53. }
  54. msgcontent.innerHTML = string;
  55. msg.style.display = 'block';
  56. var msgheight = msg.offsetHeight;
  57. var targetdiv = document.getElementById(target);
  58. targetdiv.focus();
  59. var targetheight = targetdiv.offsetHeight;
  60. var targetwidth = targetdiv.offsetWidth;
  61. var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
  62. var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
  63. msg.style.top = topposition + 'px';
  64. msg.style.left = leftposition + 'px';
  65. clearInterval(msg.timer);
  66. msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
  67. if(!autohide) {
  68. autohide = MSGHIDE; 
  69. }
  70. window.setTimeout("hideMsg()", (autohide * 1000));
  71. }
  72.  
  73. // hide the form alert //
  74. function hideMsg(msg) {
  75. var msg = document.getElementById('msg');
  76. if(!msg.timer) {
  77. msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
  78. }
  79. }
  80.  
  81. // face the message box //
  82. function fadeMsg(flag) {
  83. if(flag == null) {
  84. flag = 1;
  85. }
  86. var msg = document.getElementById('msg');
  87. var value;
  88. if(flag == 1) {
  89. value = msg.alpha + MSGSPEED;
  90. } else {
  91. value = msg.alpha - MSGSPEED;
  92. }
  93. msg.alpha = value;
  94. msg.style.opacity = (value / 100);
  95. msg.style.filter = 'alpha(opacity=' + value + ')';
  96. if(value >= 99) {
  97. clearInterval(msg.timer);
  98. msg.timer = null;
  99. } else if(value <= 1) {
  100. msg.style.display = "none";
  101. clearInterval(msg.timer);
  102. }
  103. }
  104.  
  105. // calculate the position of the element in relation to the left of the browser //
  106. function leftPosition(target) {
  107. var left = 0;
  108. if(target.offsetParent) {
  109. while(1) {
  110. left += target.offsetLeft;
  111. if(!target.offsetParent) {
  112. break;
  113. }
  114. target = target.offsetParent;
  115. }
  116. } else if(target.x) {
  117. left += target.x;
  118. }
  119. return left;
  120. }
  121.  
  122. // calculate the position of the element in relation to the top of the browser window //
  123. function topPosition(target) {
  124. var top = 0;
  125. if(target.offsetParent) {
  126. while(1) {
  127. top += target.offsetTop;
  128. if(!target.offsetParent) {
  129. break;
  130. }
  131. target = target.offsetParent;
  132. }
  133. } else if(target.y) {
  134. top += target.y;
  135. }
  136. return top;
  137. }
  138.  
  139. // preload the arrow //
  140. if(document.images) {
  141. arrow = new Image(7,80); 
  142. arrow.src = "images/msg_arrow.gif"; 
  143. }
Sep 9 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Is the offsetTop value correct?
Sep 10 '08 #2

P: 5
Is the offsetTop value correct?
Yes, the value is correct for the offsetTop.
Sep 10 '08 #3

P: 54
check this link, i think it will solve your problem:

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

Regards,
Romulo
Sep 10 '08 #4

P: 5
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
Expert Mod 15k+
P: 16,027
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

Post your reply

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