Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV positioning works different on browser IE, NS, FF, MOZ

Status
Not open for further replies.
totila

totila

Programmer
Nov 22, 2004
3
FR
Hi,
I have a little problem, i'm writing a large table with
lots of signals inside each cell and i made intensive use
of DIV tags with style='position:relative;' for correct
positioning.
It works fine in IE and FireFox (with adjustements), but
NS6, NS7 and Mozilla seem to render things differently.
Here's the full code (exepts the two bitmaps, but any one
can fit), if someone is patient enought to read and try it,
...
thank you
Code: 
//============================
//===== CODE STARTS HERE =====
//============================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<TITLE>Test multi-DIV</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<HEAD>
<!------- STYLES ------->
<style>
td#valeur-synops {
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #CCCCCC;
}

td#affichage-col-legende {
text-align: right;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 2px;
}
.dek {
position:absolute;
visibility:hidden;
z-index:2000;
}
.lignenoire {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.colonnenoire {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
</style>

<!------- JAVASCRIPTS ------->
<script>
var msie5x = false;
var msie6x = false;
var ns4x = false;
var ns6x = false;
var ns7x = false;
var ff0x = false;
var mz1x = false;

var plateformeWin = false;
var plateformeMac = false;
var Xoffset = 0; // modify these values to ...
var Yoffset = 12; // change the popup position.
var yyy = 0;

var navName = navigator.appName;
var navVersion = navigator.appVersion;
var navUserAgent = navigator.userAgent;

var msgVersionInvalide = "Unsupported browser version.";

//--------------------------------------------------------------------------------------
function setBrowserVersion () {
msie5x = false;
msie6x = false;
ns4x = false;
ns6x = false;
ns7x = false;
ff0x = false;
mz1x = false;

plateformeWin = false;
plateformeMac = false;

Xoffset= 15; // modify these values to ...
Yoffset= 10; // change the popup position.

navName = navigator.appName;
navVersion = navigator.appVersion;
navUserAgent = navigator.userAgent;

/*----- Microsoft Internet Explorer 5.x -----*/
if (navName.indexOf("Microsoft") >= 0 && navVersion.indexOf("MSIE 5.") >= 0) {
msie5x = true;
}
/*----- Microsoft Internet Explorer 6.x -----*/
if (navName.indexOf("Microsoft") >= 0 && navVersion.indexOf("MSIE 6.") >= 0) {
msie6x = true;
}
/*----- NetScape 4.x -----*/
if (navName.indexOf("Netscape") >= 0 && navVersion.indexOf("4.") == 0) {
ns4x = true;
}
/*----- NetScape 6.x -----*/
if (navUserAgent.indexOf("Netscape6/6.") >= 0) {
ns6x = true;
}
/*----- NetScape 7.x -----*/
if (navUserAgent.indexOf("Netscape/7.") >= 0) {
ns7x = true;
}
/*----- NetScape FireFox1.x -----*/
if (navUserAgent.indexOf("Firefox/0.") >= 0) {
ff0x = true;
}
/*----- Mozilla 1.x -----*/
if (navUserAgent.indexOf("Gecko/") >= 0) {
mz1x = true;
}

/*----- Windows -----*/
if (navVersion.indexOf ("Win") >=0) {
plateformeWin = true;

/*----- Macintosh -----*/
} else if (navVersion.indexOf ("Mac") >=0) {
plateformeWin = true;

/*----- Inconnu -----*/
} else {
alert (msgVersionInvalide + " : " + navVersion);

}

}

//--------------------------------------------------------------------------------------
function showBrowserVersion () {
alert (navigator.appName + "\n" + navVersion + "\n" + navUserAgent);
alert ("Is it ? \nIE 5.x : " + msie5x + " \n IE 6.x : " + msie6x + "\n NS 4.x : " + ns4x + "\n NS 6.x : " + ns6x + "\n NS 7.x : " + ns7x + "\n Firefox 0.x : " + ff0x + "\nMozilla 1.x : " + mz1x);


}

//--------------------------------------------------------------------------------------
function popup(msg,bak) {
setBrowserVersion();

document.onmousemove=get_mouse;

var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=gray CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+"><TD ALIGN=center nowrap><FONT COLOR=black SIZE=2>"+unescape(msg)+"</FONT></TD></TABLE>";
yyy = Yoffset;

document.getElementById("dek").innerHTML=content;
document.getElementById("dek").style.display='';
document.getElementById("dek").style.visibility = "visible";

document.getElementById("dek").style.left=-1000;

}

//--------------------------------------------------------------------------------------
function get_mouse(e){
setBrowserVersion();
var x=(ns4x||ns6x)?e.pageX:event.clientX+document.body.scrollLeft;
var y=(ns4x||ns6x)?e.pageY:event.clientY+document.body.scrollTop;

larg = document.getElementById("dek").offsetWidth;
haut = document.getElementById("dek").offsetHeight;

if (x + larg > getWindowWidth() - 210) x = getWindowWidth() - larg - 210;

document.getElementById("dek").style.left=x+Xoffset;
document.getElementById("dek").style.top=y+Yoffset;

}

//--------------------------------------------------------------------------------------
function kill(){
setBrowserVersion();
yyy=-1000;
if(ns4x){
document.dek.visibility="hidden";


} else if (ns6x||msie6x) {
document.getElementById("dek").style.display="none";
document.getElementById("dek").style.visibility = "hidden";


} else if (msie5x) {
document.all.dek.style.display="none";
document.all("dek").style.visibility = "hidden";

} 

}

//--------------------------------------------------------------------------------------
function getWindowWidth () {
return screen.availWidth;
}

</script>
</HEAD>


<!------- BODY ------->
<BODY>
Hi !<br>
as you can see, this table must show 3 cells (1 row per 3 columns) : <br>
first line title, then 1 cell showing 2 bitmaps (gif images 2x2 pixels stretched) <br>
and 4 numbers positionned at each corner of cell. This is done by using DIV tags and <br>
repositioning by style property.<br>
Annoying is that behavior is not the same under MSIE, NS6.x, NS7.x and FireFox<br>
Try it and see ... <br>
Any idea ?

<!--===== Popup DIV =====-->
<DIV id="dek" class="dek"> </DIV>

<script>
var posAx = 0;
var posBx = 0;
var posCx = 10;
var posDx = 10;

var posAy = -24;
var posBy = -14;
var posCy = -22;
var posDy = -12;

var shiftY = 13;
var decNS6 = 5;
var decFF0 = 5;


</script>

<!--===== THE TABLE =====-->
<TABLE border="0" cellspacing="0" cellpadding="1 " style="table-layout:fixed">
<!------ LINE 1 ------>
<TR height="20px">
<TD width="128px" height="20px" class="colonnenoire" id="affichage-col-legende">Line 1 </TD>
<!------ COL 1 ------>
<TD class="lignenoire" id="valeur-synops" width="22px" height="20px">
<!-- Please pay attention : closing tag next line to force two bitmaps show glued-->
<img src='code_couleur_14.gif' width='9px' height='17px' border='0' onmouseover='javascript:popup("GIF 1","#FFFFD6")' onmouseout='javascript:kill()'
><img src='code_couleur_15.gif' width='9px' height='17px' border='0' onmouseover='javascript:popup("GIF 2","#FFFFD6")' onmouseout='javascript:kill()'>

<script> 
setBrowserVersion();
posxLoc = posAx; 
posyLoc = posAy; 

if (ff0x) {
posyLoc += decFF0;

} else if (msie5x || msie6x) {
posyLoc -= shiftY * 0;

} else if (ns6x || ns7x) {
posyLoc += decNS6 - shiftY * 0;

} else {

}

document.write("<DIV style='position:relative;left:" + posxLoc + "px;top:"+ posyLoc + "px;width:0px;height:0px;'>");

</script>
<A href='#' onmouseover='javascript:popup("Texte infobulle 1","#FFFFD6")' onmouseout='javascript:kill()' style='cursor:pointer;text-decoration:none'>
<FONT style='font-size:7pt;color:#100000;'>
1
</FONT>
</A>
</DIV>

<script> 
posxLoc = posBx; 
posyLoc = posBy; 

if (ff0x) {
posyLoc += decFF0 - 1;

} else if (msie5x || msie6x) {
posyLoc -= shiftY * 1;

} else if (ns6x || ns7x) {
posyLoc += decNS6 - shiftY * 1;

} else {

}

document.write("<DIV style='position:relative;left:" + posxLoc + "px;top:"+ posyLoc + "px;width:0px;height:0px;'>");

</script>
<A href='#' onmouseover='javascript:popup("Texte infobulle 2","#FFFFD6")' onmouseout='javascript:kill()' style='cursor:pointer;text-decoration:none'>
<FONT style='font-size:7pt;color:#100000;'>
2
</FONT>
</A>
</DIV>

<script> 
posxLoc = posCx; 
posyLoc = posCy; 

if (ff0x) {
posyLoc += decFF0 - 2;

} else if (msie5x || msie6x) {
posyLoc -= shiftY * 2;

} else if (ns6x || ns7x) {
posyLoc += decNS6 - shiftY * 2;

} else {

}

document.write("<DIV style='position:relative;left:" + posxLoc + "px;top:"+ posyLoc + "px;width:0px;height:0px;'>");

</script>
<A href='#' onmouseover='javascript:popup("Texte infobulle 3","#FFFFD6")' onmouseout='javascript:kill()' style='cursor:pointer;text-decoration:none'>
<FONT style='font-size:7pt;color:#100000;'>
3
</FONT>
</A>
</DIV>

<script> 
posxLoc = posDx;
posyLoc = posDy;

if (ff0x) {
posyLoc += decFF0 - 3;

} else if (msie5x || msie6x) {
posyLoc -= shiftY * 3;

} else if (ns6x || ns7x) {
posyLoc += decNS6 - shiftY * 3;

} else {

}

document.write("<DIV style='position:relative;left:" + posxLoc + "px;top:"+ posyLoc + "px;width:0px;height:0px;'>");
</script>
<A href='#' onmouseover='javascript:popup("Texte infobulle 4","#FFFFD6")' onmouseout='javascript:kill()' style='cursor:pointer;text-decoration:none'>
<FONT style='font-size:7pt;color:#100000;'>
4
</FONT>
</A>
</DIV>
</TD>

</TR>


</TABLE>


</BODY>
</HTML>
 
Sort by date Sort by votes

If I comment out the following line:

Code: 
ns7x = true;

Then things suddenly look a whole lot better in NN7 - almost perfect, in fact.

So I'd say that your per-browser variables and tweaks are simply way off, and you probably need to go through and re-adjust them.

Hope this helps,
Dan
 
Upvote 0 Downvote
I think your main problems lie in the first few lines...
Code: 
//============================
//===== CODE STARTS HERE =====
//============================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<TITLE>Test multi-DIV</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<HEAD>
From the top:
[ul]
[li]You shouldn't put anything before the doctype, as it can confuse some browsers, but if you really need a comment at the top of a file to tell you that it's the start of the code, use the valid HTML comment syntax and enclose it in <!-- --> marks.
[/li]
[li]The doctype you're using is ancient and incomplete. Any browsers that aren't thrown off by the non-comments will ignore it anyway and render in "Quirks Mode". That's why it's looking different in different browsers - they're all rendering according to historical behaviour rather than the standards.
[/li]
[li]It's probably not causing any trouble, but your [tt]<TITLE>[/tt] and [tt]<META>[/tt] elements should be inside the [tt]<HEAD>[tt] element, not outside it.[/li]
[/ul]
So, in summary your document should start:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<HTML>
<HEAD>
<TITLE>Test multi-DIV</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
Does that make them all look the same? No. Because you're doing so much tinkering around with Javascript that I couldn't figure out what you're actually trying to achieve.

What is the effect you're after? I'm sure there's a way to get it without all that scripting.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote

I found that with a valid DOCTYPE, the thing looked even more screwed up than without... But I agree, Chris - it really does look like a sledgehammer to crack a nut.

Dan
 
Upvote 0 Downvote
Actually,
it seems to be a "sledgehammer to crack a nut" and IT IS, but this piece of code is a synthesis of a bigger application I work on, but which I've not the right to Post (I'm not the Boss and I must respect confidentiality clauses in my job contract).
The concet is to Show a web page with a Table which cells contain two colored bitmap corresponding to vacation situation of an employee, in the morning and afternoon (I use bitmaps because user may PRINT the page and we cannot oblige users to change their Browser settings in order to print colored backgrounds).
But cells may containt too up to 4 markers, actually a H, a ? or a !, and ? may be placed in left half of cell, in right half or centered. This markers corresponds to vacacy demands, for morning, afertnoon or the whole day.
Application is even moore complex, because colors of bitmap depends by state of demand or by the group of vacation, but this is only to show complexity of my real code.
And we must make it work on IE, NS, FireFox, ....
AAAHHHHH, it's my nightmare, sorry guys, and thank you for your help...

 
Upvote 0 Downvote
Cutting out all the Javascript, try this:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
.split div {
   position: relative;
}

.split img {
   height: 1.5em;
   width: 3em;
   border: 0;
}

.split a {
   display: block;
   height: 1.5em;
   width: 1.5em;
   line-height: 1.5em;
   text-align: center;
   text-decoration: none;
   color: #FFFFFF;
   font-weight: bold;
   position: absolute;
}

.left {
   top: 0;
   left: 0;
}
.right {
   top: 0;
   right: 0;
}
.cent {
   top: 0;
   left: 0.75em;
}

</style>
</head>
<body>
<table class="split">
<tr>
  <td><div>
    <img src="redblue.gif" />
    <a class="left" href="#1" title="tip1">1</a>
    <a class="right" href="#2" title="tip2">2</a>
  </div></td>
  <td><div>
    <img src="redblue.gif" />
    <a class="cent" href="#1" title="tip3">3</a>
  </div></td>
</tr>
</table>
</body>
</html>
redblue.gif is a 2px wide, 1px high image, coloured as the name indicates. I don't know whether the links are supposed to go into the four corners, or left right & centre, so I've done the latter - you should be able to work out the positioning required to get the corners if you need them.

Note that I've sized everything in ems instead of pixels. This means that if you change the text size, everything resizes to fit.

It works in both IE6, FF and NS7. I don't have Mozilla installed on my machine, but it should work if the other two Gecko browsers do. You might possibly need to remove the line breaks and spaces between the contents of the <td>s to get it working properly on some browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
820
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
225
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
778
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
995
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top