<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开发者_Python百科 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.
You can try setting the position
to absolute
.
Don't know if you want it absolute in your scenario, but works fine: http://jsfiddle.net/UL5pD/
#mainbody, #mainbodyloginpage {
left: 35%;
position: absolute;
width: 40%;
}
#mainbodyloginpage {
top: 55%;
}
精彩评论