<html>
<head>
<style>
#mainbody, #mainbodyloginpage {
left: 35%;
position: relative;
width: 40%;
}
#mainbodyloginpage {
top: 55%;
}
</style>
</head>
<body>
<div id="mainbodyloginpage">
..
..
.. [ top property not applied here ]
..
</div>
</body>
</html>
any idea why the top property is not being applied, other property like left is applied.?
update::
as soon as i change
top: 55%;
to
top: 20px;
it works. but i dont want to hardcore it to a fixed value.
Anybody have any insight what going on here?
Update2::
This code work perfectly fine in IE but not in firefox/chrome. i.e chrome and firefox ignores the top property set as a percentage. IE does honour it.
You need to specifically set position: relative as position: static is the default. top/left/etc don’t have any effect on statically position elements.