Hi all,
I'm trying to understand how absolute positioning works, and I came across a weird thing in FF. if I use the code below, then the DIV tags are overlayed on top of each other, but the P tags aren't i.e. Text P is display and then Text p on the next line.
But if I switch the position of the P tags with DIV i.e. display div first and then P, than BOTH tags are overlayed.
I'm just curious to know what exactly is suppose to happen (I assume we should get the same behavior in both cases.
Thanks a lot of the help!!!
[HTML]
<html>
<head>
<style type="text/css">
div
{
margin-top: 1em;
position:absolu te;
left:100px;
top:150px
}
p
{
position:absolu te;
left:10px;
top:50px
display: block;
}
</style>
</head>
<body>
<p>Text P</p>
<p>Text p</p>
<div>Text D</div>
<div>Text D</div>
<!--
Both are overlayed
<div>Text D</div>
<div>Text D</div>
<p>Text P</p>
<p>Text p</p>
-->
</body>
</html>
[/HTML]
I'm trying to understand how absolute positioning works, and I came across a weird thing in FF. if I use the code below, then the DIV tags are overlayed on top of each other, but the P tags aren't i.e. Text P is display and then Text p on the next line.
But if I switch the position of the P tags with DIV i.e. display div first and then P, than BOTH tags are overlayed.
I'm just curious to know what exactly is suppose to happen (I assume we should get the same behavior in both cases.
Thanks a lot of the help!!!
[HTML]
<html>
<head>
<style type="text/css">
div
{
margin-top: 1em;
position:absolu te;
left:100px;
top:150px
}
p
{
position:absolu te;
left:10px;
top:50px
display: block;
}
</style>
</head>
<body>
<p>Text P</p>
<p>Text p</p>
<div>Text D</div>
<div>Text D</div>
<!--
Both are overlayed
<div>Text D</div>
<div>Text D</div>
<p>Text P</p>
<p>Text p</p>
-->
</body>
</html>
[/HTML]
Comment