开发者

CSS property not applied

开发者 https://www.devze.com 2023-03-28 16:02 出处:网络
<html> <head> <style> #mainbody, #mainbodyloginpage { left: 35%; position: relative; width: 40%;
<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%;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消