59
hello,
Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out, of course).
[HTML]<!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>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
p
{
margin: 0px;
padding: 0px;
}
body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}
form
{
margin: 0px;
padding: 0px;
}
.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}
.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}
.button1
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}
.button2
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}
.button3
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}
.button4
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}
.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}
.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}
.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
</style>
<script>
function OffWindowHeight()
{
var OffWindowHeight=0;
window.scrollTo(0,10000000);
if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;
window.scrollTo(0,0);
return OffWindowHeight;
}
function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;
return WindowHeight;
}
function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;
}
function favBg()
{
var favHeight = document.getElementById('favBg');
favHeight.style.height = pHeight() + 'px';
}
var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}
function button1()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button1 = document.getElementById('button1');
button1.style.display = 'block';
}
function button2()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button2 = document.getElementById('button2');
button2.style.display = 'block';
}
function button3()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button3 = document.getElementById('button3');
button3.style.display = 'block';
}
function button4()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button4 = document.getElementById('button4');
button4.style.display = 'block';
}
function closeMsg()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'none';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'none';
var button1 = document.getElementById('button1');
button1.style.display = 'none';
var button2 = document.getElementById('button2');
button2.style.display = 'none';
var button3 = document.getElementById('button3');
button3.style.display = 'none';
var button4 = document.getElementById('button4');
button4.style.display = 'none';
}
</script>
<body onload="favBg(); favArea();">
<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>
<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>
<div id="favBg" class="favBg"></div>
<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); button1();" class="buttons" style="color: blue;" type="button" value="button1">
<input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2">
<input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3">
<input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
</form>
</div>
</div>
</body>
</html>[/HTML]
Firstly try the above code in Firefox and opera. It works well. Try clicking then in order and randomly e.g:- 'button1' then 'button4' then 'button2' everything will be good.
Similarly try the code in the above manner in internet explorer, the results are different. It just isn't working the way it's supposed to, as which you can understand from trying it out in ff and opera.
in ie if done like this: 'button1' then 'button4' then 'button2', it the shows div with id 'button4' with no text, instead of the div with id 'button2' and text saying "button2".
Also notice that in clicking 'close' the function closeMsg() is run, wich sets all to 'display: none'.
Just check out the code, you'll understand what's the problem. I'll only complicate thinks if i try to explain it.
Thanks in advance :)
