Fixed position for dynamically created div tag does not work in IE [Archive]

View Full Version : Fixed position for dynamically created div tag does not work in IE

pankaj.ghadge

10-16-2008, 07:39 AM

I have created a div using javascript and applied a css after creating a div but position="fixed" attribute not working for IE.

Following is the code .......
--------------------------------------------------------------------------------------------------------------------------
main.html
<html>
<head>
</head>
<frameset cols="15%, *" id="fs1">
<frame src="left.html" name="left" frameborder="1" id=leftId>
<frame src="right.html" name="right" frameborder="1" id=rightId>
</frameset>
</html>

left.html
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script>
function init()
{

var newDiv=parent.right.document.createElement("div");

newDiv.setAttribute('id',"dhtmlwindowholder");

newDiv.style.width = "30%";

newDiv.style.height = "30%";
newDiv.style.color= "#191970";
newDiv.style.backgroundColor="red";

var Swidth=parent.right.document.body.clientWidth;
var Sheight=parent.right.document.body.clientHeight;

newDiv.style.top=Sheight-300;
newDiv.style.left=Swidth-300;
newDiv.style.position="fixed";

parent.right.document.body.appendChild(newDiv);
}
onload=init
</script>
</head>
<body>
</body>
</html>

right.html
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 
something 

</body>
</html>

-----------------------------------------------------------------------------------------------------------
position="fixed" work well for firefox but not for IE
i have also tried the DOCTYPE like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

I have used each one of them .............
but still it is not working in IE..................
so please tell me the solution...................

Thanks in advance ......................................

jscheuer1

10-16-2008, 08:10 AM

IE, until version 7, doesn't support the css style value of fixed for the position property. There are some ways to make it appear to do so though.

Now, I tried your example (on a single page) in IE 7 with a strict DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

And it worked fine. The thing you may be missing is that for the DOCTYPE to take effect, it must be on the page (in your case right.html) where the element with the style position: fixed; is.

Also in IE, if there is anything before the DOCTYPE declaration, the declaration will be ignored.

General Note: Your HTML (both hard coded and script generated) is invalid (doesn't adhere to standards), so how it will behave with or without a strict DOCTYPE is more open to browser quirks than it otherwise would be.

pankaj.ghadge

10-16-2008, 08:49 AM

I am using frame set ..........
I am using left frame to create a div tag on Right side frame....................

I have included
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

on both left and right html page.
when i have used this with mozilla it does not show any thing and when i have removed this mozilla shows it well..............
so tell me problem is with the frame or something else .........................
please guide me....................................

jscheuer1

10-16-2008, 09:18 AM

Frames generally are never the problem. Usually they just make things seem more complicated.

The issue you are currently describing is due at least in part to the General Note from my last post, invalid code. When specifying via style, dimensions and positioning (left, right, top or bottom) coordinates, units (like px or em, etc.) should be supplied. They are required for a strict DOCTYPE, but some browsers will ignore that. FF is not one of those. Do like so:

newDiv.style.top=Sheight-300+'px';
newDiv.style.left=Swidth-300+'px';

pankaj.ghadge

10-16-2008, 10:15 AM

Thanks Buddy .............
It was a small mistake but i was overlooking that mistake....................
My approach was totally wrong..........
U helped me a lot ..........................
Thanks agian...................