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> </td>
<td> </td>
</tr>
<tr>
<td> </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////////////////////////////////////////////////////////
///////////////////////////////////////JavaScript File////////////////////////////////////////////////////////
[CODE=javascript]function validate()
{
try
{
var form = document.forms["FORM"];
var len = form.elements.l ength;
for (var i = 0; i < len; i++)
{
var fld = form.elements[i];
if(fld.classNam e == "mandatory" && fld.value == "")
{
var sErrMsg = fld.title + " is required";
inlineMsg(fld.n ame,sErrMsg);
return false;
}
}
return true;
}
catch (E)
{
alert(E);
}
}
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(targe t,string,autohi de) {
var msg;
var msgcontent;
if(!document.ge tElementById('m sg')) {
msg = document.create Element('div');
msg.id = 'msg';
msgcontent = document.create Element('div');
msgcontent.id = 'msgcontent';
document.body.a ppendChild(msg) ;
msg.appendChild (msgcontent);
msg.style.filte r = 'alpha(opacity= 0)';
msg.style.opaci ty = 0;
msg.alpha = 0;
} else {
msg = document.getEle mentById('msg') ;
msgcontent = document.getEle mentById('msgco ntent');
}
msgcontent.inne rHTML = string;
msg.style.displ ay = 'block';
var msgheight = msg.offsetHeigh t;
var targetdiv = document.getEle mentById(target );
targetdiv.focus ();
var targetheight = targetdiv.offse tHeight;
var targetwidth = targetdiv.offse tWidth;
var topposition = topPosition(tar getdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(ta rgetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(m sg.timer);
msg.timer = setInterval("fa deMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeo ut("hideMsg()" , (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getEle mentById('msg') ;
if(!msg.timer) {
msg.timer = setInterval("fa deMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getEle mentById('msg') ;
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opaci ty = (value / 100);
msg.style.filte r = 'alpha(opacity= ' + value + ')';
if(value >= 99) {
clearInterval(m sg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.displ ay = "none";
clearInterval(m sg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(ta rget) {
var left = 0;
if(target.offse tParent) {
while(1) {
left += target.offsetLe ft;
if(!target.offs etParent) {
break;
}
target = target.offsetPa rent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(tar get) {
var top = 0;
if(target.offse tParent) {
while(1) {
top += target.offsetTo p;
if(!target.offs etParent) {
break;
}
target = target.offsetPa rent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.ima ges) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}[/CODE]
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> </td>
<td> </td>
</tr>
<tr>
<td> </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////////////////////////////////////////////////////////
Code:
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}
/**
p {
margin:.4em 0 .8em 0;
padding:0;
} */
/* Header styles */
#header {
clear:both;
float:left;
width:99%;
}
/**
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
} */
/* 'widths' sub menu */
#layoutdims {
clear:both;
/*background:#eee;*/
margin:0;
padding:0px 17px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* 2 column left menu settings */
.leftmenu {
/* background:#FFD8B7;*/
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:200px;
background:#fff;
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin:0 15px 0 170px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
width:180px;
position:relative;
right:194px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
font-size: 0.7em;
padding: 1em 0.5em 0.5em 0.5em;
text-align: center;
}
#footer p {
margin: 0.5em;
}
#footer #legal {
margin: 2em 0 0 0;
padding: 0;
}
#footer #legal li {
display: inline;
}
#footer #copyrights {
margin: 0.5em;
}
#footer ul {
display: inline;
margin: 0 0 0 0.4em;
padding: 0 0 0 0.4em;
}
* {margin:0; padding:0}
#msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px}
#msgcontent {display:block; background:#f3e6e6; border:2px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}
/* --> */
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>
<![endif]-->
[CODE=javascript]function validate()
{
try
{
var form = document.forms["FORM"];
var len = form.elements.l ength;
for (var i = 0; i < len; i++)
{
var fld = form.elements[i];
if(fld.classNam e == "mandatory" && fld.value == "")
{
var sErrMsg = fld.title + " is required";
inlineMsg(fld.n ame,sErrMsg);
return false;
}
}
return true;
}
catch (E)
{
alert(E);
}
}
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(targe t,string,autohi de) {
var msg;
var msgcontent;
if(!document.ge tElementById('m sg')) {
msg = document.create Element('div');
msg.id = 'msg';
msgcontent = document.create Element('div');
msgcontent.id = 'msgcontent';
document.body.a ppendChild(msg) ;
msg.appendChild (msgcontent);
msg.style.filte r = 'alpha(opacity= 0)';
msg.style.opaci ty = 0;
msg.alpha = 0;
} else {
msg = document.getEle mentById('msg') ;
msgcontent = document.getEle mentById('msgco ntent');
}
msgcontent.inne rHTML = string;
msg.style.displ ay = 'block';
var msgheight = msg.offsetHeigh t;
var targetdiv = document.getEle mentById(target );
targetdiv.focus ();
var targetheight = targetdiv.offse tHeight;
var targetwidth = targetdiv.offse tWidth;
var topposition = topPosition(tar getdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(ta rgetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(m sg.timer);
msg.timer = setInterval("fa deMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeo ut("hideMsg()" , (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getEle mentById('msg') ;
if(!msg.timer) {
msg.timer = setInterval("fa deMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getEle mentById('msg') ;
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opaci ty = (value / 100);
msg.style.filte r = 'alpha(opacity= ' + value + ')';
if(value >= 99) {
clearInterval(m sg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.displ ay = "none";
clearInterval(m sg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(ta rget) {
var left = 0;
if(target.offse tParent) {
while(1) {
left += target.offsetLe ft;
if(!target.offs etParent) {
break;
}
target = target.offsetPa rent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(tar get) {
var top = 0;
if(target.offse tParent) {
while(1) {
top += target.offsetTo p;
if(!target.offs etParent) {
break;
}
target = target.offsetPa rent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.ima ges) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}[/CODE]
Comment