Email conversation
| From | David Garrett |
|---|
| To | Me |
|---|
| Subject | findPosition - problem for Firefox where <table align="center" ...> |
|---|
| Date | 28 February 2007 05:18 |
|---|
I refer to the findPosition script
http://www.howtocreate.co.uk/tutorials/javascript/browserspecific
As far as I can tell there is a Firefox problem detecting the position for a
table that is centre aligned.
I am looking to get the position of a page element.
If you get the chance please load the following HTML and resize and refresh
the page. The position of the 3 elements is reported.
Thanks
David
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TABLE align="center" ... try for different page widths</title>
<script type="text/javascript">
function showPosition( idId ) {
var t = document.getElementById(idId);
var pos= findPosition( t );
var msg= "pos of id:"+idId+"= ("+pos[0]+", "+pos[1]+")";
//alert(msg);
elem = document.createElement('div');
elem.innerHTML = msg;
document.body.appendChild(elem);
}
function findPosition( oLink ) {
if( oLink.offsetParent ) {
for( var posX = 0, posY = 0; oLink.offsetParent; oLink =
oLink.offsetParent ) {
posX += oLink.offsetLeft;
posY += oLink.offsetTop;
}
return [ posX, posY ];
} else {
return [ oLink.x, oLink.y ];
}
}
</script>
</head>
<body>
<table width="200" align="center" style="border:30px green solid;"
cellpadding="0" cellspacing="0" id="t">
<tr>
<td > test </td>
</tr>
</table>
<table width="200" align="center" border="1" cellpadding="0" cellspacing="0"
id="tt">
<tr>
<td > test </td>
</tr>
</table>
<div align="center" style="border: 1px red solid;">
<table width="200" border="1" cellpadding="0" cellspacing="0" id="ttt">
<tr>
<td > test OK</td>
</tr>
</table>
</div>
<hr>
<div><strong>Firefox problem</strong></div>
<div>expected result dimensions are wrong. The actual results should change
for different screen widths and refresh page</div>
<div>Try ... align="right" ... better results<div>
<script> showPosition('t'); </script>
<p> </p>
<script> showPosition('tt') </script>
<p> </p>
<script> showPosition('ttt') </script>
</body>
</html>
| From | Me |
|---|
| To | David Garrett |
|---|
| Subject | Re: findPosition - problem for Firefox where <table align="center" ...> |
|---|
| Date | 28 February 2007 13:34 |
|---|
David,
> As far as I can tell there is a Firefox problem detecting the position for
> a table that is centre aligned.
> I am looking to get the position of a page element.
The align attribute is a complete mess. It dates back to before CSS, and is
not possible to describe completely in CSS. CSS based browsers are left to
fend for themselves when working out how to represent aligned elements using
CSS. Each browser has its own way of doing it, but in general it is like
this:
* align="left" -> float:left; and apply clear:left; to the padding-bottom of
the parent element, but only for that float (CSS alone cannot do this).
* align="center" -> margin:0 auto; but allow real margins as well (CSS alone
cannot do this).
* align="right" -> float:right; and apply clear:right; to the padding-bottom
of the parent element, but only for that float (CSS alone cannot do this).
In many cases, they also apply an inherited text-align:left/center/right
which should not happen according to CSS. (IE actually breaks text-align so
that it also aligns block elements by giving them an auto left/right margin,
and it also has a broken auto margin implementation that gets alignment
wrong inside shrink-to-fit containers). So in general, I advise you to stay
away from using the align attribute completely.
As part of its align="center" implementation, Firefox does not use real
margins, it uses additional margins inside the actual margin. The offset
positions are taken from those additional margins, instead of the border
like other browsers. Unfortunately, it then also makes this same mistake if
you use a real margin:0 auto; by taking the measurements from the edge of
the margin.
Usefully though, it does get the position of elements inside the table
correct. You can take the masurements of the first cell in the table
instead. It will be offset by the border and cellspacing of the table.
findPosition(sometable.getElementsByTagName('td')[0])
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | David Garrett |
|---|
| To | Me |
|---|
| Subject | Re: findPosition - problem for Firefox where <table align="center" ...> |
|---|
| Date | 1 March 2007 10:28 |
|---|
For what it is worth, here is my solution ... (no doubt overly simplified)
function findPosition( node ) {
var isSafari=(/Safari/.test(navigator.userAgent))?true:false;
var
isKonq_Saf_KHTML=(/Konqueror|Safari|KHTML/.test(navigator.userAgent))?true:f
alse;
var isMSIE=(/MSIE/.test(navigator.userAgent))?true:false;
var
isGecko=(/Gecko/.test(navigator.userAgent)&&!isKonq_Saf_KHTML)?true:false;
var
isFirefox=(/Firefox\/2/.test(navigator.userAgent)&&!isSafari)?true:false;
if( node.offsetParent ) {
for( var posX = 0, posY = 0; node.offsetParent; node = node.offsetParent
) {
var msg="YY";
if ( isGecko && node.nodeType==1 &&
"table"==(node.nodeName.toLowerCase()) && node.getAttribute("align")!=null
&& (typeof node.getAttribute("align")!="undefined") &&
node.getAttribute("align").toLowerCase()=="center" )
//if (true )
{
//alert("fudge the position");
var offsetLeft= node.offsetLeft;
var offsetWidth= node.offsetWidth;
var width= parseInt(node.width);
posX= offsetLeft + (offsetWidth-width)/2
}
else
{
posX += node.offsetLeft;
}
posY += node.offsetTop;
}
return [ posX, posY ];
} else {
return [ node.x, node.y ];
}
}
| From | Me |
|---|
| To | David Garrett |
|---|
| Subject | Re: findPosition - problem for Firefox where <table align="center" ...> |
|---|
| Date | 1 March 2007 11:12 |
|---|
David,
> For what it is worth, here is my solution ... (no doubt overly
> simplified)
Generally, I do not like solutions that depend on browser sniffing. They are
far too error prone (yours will probably catch OmniWeb - a Safari based
browser - by mistake), and are not future proof.
I prefer a solution that either avoids the bug (such as the one I provided
in my last email) or that detects the bug itself, and corrects it. Detecting
the bug could easily be done here by checking the position of the first
cell, and the reported position of the table, and seeing if they are too far
different (more than the table border and cellspacing combined).
This would mean that when the bug gets fixed in the browser, or other
browsers get released that your sniffer mis-identifies, you do not have to
change your code at all, because it already takes care of it.
| From | David Garrett |
|---|
| To | Me |
|---|
| Subject | Re: findPosition - problem for Firefox where <table align="center" ...> |
|---|
| Date | 1 March 2007 11:21 |
|---|
OK
That is becoming a bit clearer. I will definitely attempt the method you
suggest.
I agree that the browser sniffing is a very flakey solution. My poor
javascript skills initially made me go for the simple solution (I'm
fine/strong with java but javascript and DOM just keeps confounding me ...
Your site is VERY helpful)
THANKYOU THANKYOU THANKYOU!!!
David